fix: added fix for widget warning/save modal states (#11356)

* feat: field selector migrated to telemetry field key

* feat: move floating panel to field selector

frontend/src/components/FieldsSelector/AddedFields.tsx

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

frontend/src/components/FieldsSelector/FieldsSelector.module.scss

@@ -56,12 +56,14 @@
 }
 
 .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;
 }
 
@@ -89,13 +91,6 @@
 	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/components/FieldsSelector/FieldsSelector.tsx

@@ -0,0 +1,176 @@
+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/OtherFields.tsx

@@ -4,51 +4,58 @@ import { Skeleton } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
+import {
+	FieldContext,
+	FieldDataType,
+	SignalType,
+	TelemetryFieldKey,
+} from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
-import styles from './FieldsSettings.module.scss';
+import styles from './FieldsSelector.module.scss';
 
 interface OtherFieldsProps {
-	dataSource: DataSource;
+	signal: DataSource;
 	debouncedInputValue: string;
-	addedFields: BaseAutocompleteData[];
-	onAdd: (field: BaseAutocompleteData) => void;
+	addedFields: TelemetryFieldKey[];
+	onAdd: (field: TelemetryFieldKey) => void;
 	isAtLimit: boolean;
 }
 
 function OtherFields({
-	dataSource,
+	signal,
 	debouncedInputValue,
 	addedFields,
 	onAdd,
 	isAtLimit,
 }: OtherFieldsProps): JSX.Element {
-	// API call to get available attribute keys
-	const { data, isFetching } = useGetAggregateKeys(
+	const { data, isFetching } = useGetQueryKeySuggestions(
 		{
+			signal,
 			searchText: debouncedInputValue,
-			dataSource,
-			aggregateOperator: 'noop',
-			aggregateAttribute: '',
-			tagType: '',
 		},
 		{
 			queryKey: [
-				REACT_QUERY_KEY.GET_OTHER_FILTERS,
-				'preview-fields',
+				REACT_QUERY_KEY.GET_FIELDS_SELECTOR_SUGGESTIONS,
+				signal,
 				debouncedInputValue,
 			],
 			enabled: true,
 		},
 	);
 
-	// 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));
+	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,
+			}));
 	}, [data, addedFields]);
 
 	if (isFetching) {
@@ -76,10 +83,10 @@ function OtherFields({
 						) : (
 							otherFields.map((attr) => (
 								<div
-									key={attr.key}
+									key={attr.name}
 									className={cx(styles.fieldItem, styles.otherFieldItem)}
 								>
-									<span className={styles.fieldKey}>{attr.key}</span>
+									<span className={styles.fieldKey}>{attr.name}</span>
 									{!isAtLimit && (
 										<Button
 											className={cx(styles.addBtn, 'periscope-btn')}
@@ -94,7 +101,6 @@ function OtherFields({
 								</div>
 							))
 						)}
-						{isAtLimit && <div className={styles.limitHint}>Maximum 10 fields</div>}
 					</>
 				</OverlayScrollbar>
 			</div>

frontend/src/components/FieldsSelector/index.ts

@@ -0,0 +1 @@
+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, { runAfterUpdate: true });
+			handleChangeQueryData('groupBy', value);
 		},
 		[handleChangeQueryData],
 	);

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

@@ -283,14 +283,14 @@ function QueryAddOns({
 
 	const handleChangeGroupByKeys = useCallback(
 		(value: IBuilderQuery['groupBy']) => {
-			handleChangeQueryData('groupBy', value, { runAfterUpdate: true });
+			handleChangeQueryData('groupBy', value);
 		},
 		[handleChangeQueryData],
 	);
 
 	const handleChangeOrderByKeys = useCallback(
 		(value: IBuilderQuery['orderBy']) => {
-			handleChangeQueryData('orderBy', value, { runAfterUpdate: true });
+			handleChangeQueryData('orderBy', value);
 		},
 		[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, { runAfterUpdate: true });
-	}, [handleChangeQueryData, query.disabled]);
+		handleChangeQueryData('disabled', !query.disabled);
+	}, [handleChangeQueryData, query]);
 
 	const handleToggleCollapsQuery = (): void => {
 		setIsCollapsed(!isCollapsed);

frontend/src/constants/reactQueryKeys.ts

@@ -108,4 +108,7 @@ 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,77 +186,40 @@
 		display: flex;
 		flex-direction: column;
 
-		.section-1 {
+		section {
 			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;
+				height: unset;
+				padding: 8px;
 				align-items: center;
-				gap: 6px;
+				gap: 12px;
 				color: var(--l2-foreground);
 				font-family: Inter;
-				font-size: 14px;
+				font-size: 13px;
 				font-style: normal;
 				font-weight: 400;
 				line-height: normal;
 				letter-spacing: 0.14px;
+				border-top: none;
+
 				.ant-btn-icon {
 					margin-inline-end: 0px;
 				}
 			}
 		}
+
+		.section-1,
 		.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;
-
-				.ant-btn-icon {
-					margin-inline-end: 0px;
-				}
-			}
 		}
-		.delete-dashboard {
-			display: flex;
-			flex-direction: column;
-			align-items: start;
 
-			.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;
-			}
+		.delete-dashboard .ant-btn {
+			color: var(--bg-cherry-400) !important;
 		}
 	}
 }

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

@@ -211,7 +211,12 @@
 			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, Info, X } from '@signozhq/icons';
+import { Check, ExternalLink, SolidInfoCircle, 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}
 					>
-						<Info size={14} className={styles.crossPanelSyncInfoIcon} />
+						<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
 					</Tooltip>
 				</div>
 				<div className={styles.crossPanelSyncRow}>

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

@@ -26,10 +26,13 @@
 	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

@@ -0,0 +1,53 @@
+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,13 +1,17 @@
 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 { handleQueryChange } from '../utils';
+import { getIsQueryModified, handleQueryChange } from '../utils';
 
 const buildSupersetQuery = (extras?: Record<string, unknown>): Query => ({
 	queryType: EQueryType.QUERY_BUILDER,
@@ -37,6 +41,128 @@ 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,18 +1,17 @@
 /* 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, SolidAlertTriangle, X } from '@signozhq/icons';
+import { Check, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import {
 	ResizableHandle,
 	ResizablePanel,
 	ResizablePanelGroup,
 } from '@signozhq/ui/resizable';
-import { Flex, Modal, Space } from 'antd';
+import { Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
@@ -69,7 +68,6 @@ 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';
@@ -82,6 +80,7 @@ import {
 	placeWidgetAtBottom,
 	placeWidgetBetweenRows,
 } from './utils';
+import DiscardChangesModal from './WidgetModals/DiscardChangesModal';
 
 import './NewWidget.styles.scss';
 
@@ -98,8 +97,6 @@ function NewWidget({
 
 	const { dashboardVariables } = useDashboardVariables();
 
-	const { t } = useTranslation(['dashboard']);
-
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
 	const {
@@ -110,11 +107,6 @@ function NewWidget({
 		setSupersetQuery,
 	} = useQueryBuilder();
 
-	const isQueryModified = useMemo(
-		() => getIsQueryModified(currentQuery, stagedQuery),
-		[currentQuery, stagedQuery],
-	);
-
 	const { selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
@@ -139,6 +131,23 @@ 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);
@@ -228,7 +237,6 @@ function NewWidget({
 		Record<string, string>
 	>(selectedWidget?.customLegendColors || {});
 
-	const [saveModal, setSaveModal] = useState(false);
 	const [discardModal, setDiscardModal] = useState(false);
 
 	const [bucketWidth, setBucketWidth] = useState<number>(
@@ -340,7 +348,6 @@ function NewWidget({
 	]);
 
 	const closeModal = (): void => {
-		setSaveModal(false);
 		setDiscardModal(false);
 	};
 
@@ -593,7 +600,7 @@ function NewWidget({
 			},
 		};
 
-		updateDashboardMutation.mutateAsync(dashboard, {
+		return updateDashboardMutation.mutateAsync(dashboard, {
 			onSuccess: () => {
 				setToScrollWidgetId(selectedWidget?.id || '');
 				navigateToDashboardPage();
@@ -688,9 +695,9 @@ function NewWidget({
 				})),
 			}),
 		});
-		setSaveModal(true);
+		onClickSaveHandler();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isNewPanel]);
+	}, [onClickSaveHandler]);
 
 	const isNewTraceLogsAvailable =
 		currentQuery.queryType === EQueryType.QUERY_BUILDER &&
@@ -951,57 +958,14 @@ function NewWidget({
 					</ResizablePanel>
 				</ResizablePanelGroup>
 			</PanelContainer>
-			<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
+			<DiscardChangesModal
 				open={discardModal}
-				width={600}
-			>
-				<Typography>{t('dashboard_unsave_changes')}</Typography>
-			</Modal>
+				isNewPanel={isNewPanel}
+				panelTitle={title}
+				dashboardTitle={dashboardData?.data?.title}
+				onDiscard={discardChanges}
+				onClose={closeModal}
+			/>
 		</Container>
 	);
 }

frontend/src/container/NewWidget/utils.ts

@@ -1,5 +1,4 @@
 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 {
@@ -26,16 +25,84 @@ 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,
-	stagedQuery: Query | null,
+	baselineQuery: Query | null | undefined,
 ): boolean => {
-	if (!stagedQuery) {
+	if (!baselineQuery) {
 		return false;
 	}
-	const omitIdFromStageQuery = omitIdFromQuery(stagedQuery);
-	const omitIdFromCurrentQuery = omitIdFromQuery(currentQuery);
-	return !isEqual(omitIdFromStageQuery, omitIdFromCurrentQuery);
+	return !isEqual(
+		stripUndefined(normalizeForDirtyCheck(baselineQuery)),
+		stripUndefined(normalizeForDirtyCheck(currentQuery)),
+	);
 };
 
 export type PartialPanelTypes = {

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

@@ -5,8 +5,7 @@ import {
 	BaseAutocompleteData,
 	DataTypes,
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import {
 	DataSource,
 	MetricAggregateOperator,
@@ -334,196 +333,3 @@ 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,7 +45,6 @@ import {
 import {
 	HandleChangeFormulaData,
 	HandleChangeQueryData,
-	HandleChangeQueryDataOptions,
 	HandleChangeQueryDataV5,
 	UseQueryOperations,
 } from 'types/common/operations.types';
@@ -77,7 +76,6 @@ export const useQueryOperations: UseQueryOperations = ({
 		currentQuery,
 		setLastUsedQuery,
 		redirectWithQueryBuilderData,
-		handleRunQuery,
 	} = useQueryBuilder();
 
 	const [operators, setOperators] = useState<SelectOption<string, string>[]>([]);
@@ -532,7 +530,7 @@ export const useQueryOperations: UseQueryOperations = ({
 
 	const handleChangeQueryData: HandleChangeQueryData | HandleChangeQueryDataV5 =
 		useCallback(
-			(key: string, value: any, options?: HandleChangeQueryDataOptions) => {
+			(key: string, value: any) => {
 				const newQuery = {
 					...query,
 					[key]:
@@ -543,24 +541,8 @@ export const useQueryOperations: UseQueryOperations = ({
 
 				if (isForTraceOperator) {
 					handleSetTraceOperatorData(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,
-							),
-						},
-					});
+				} else {
+					handleSetQueryData(index, newQuery);
 				}
 			},
 			[
@@ -569,8 +551,6 @@ 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.key))
+			.filter((f) => !RESERVED_PREVIEW_KEYS.has(f.name))
 			.map((f) => {
-				const value = getSpanAttribute(span, f.key);
+				const value = getSpanAttribute(span, f.name);
 				return value !== undefined && value !== ''
-					? { key: f.key, value: String(value) }
+					? { key: f.name, value: String(value) }
 					: null;
 			})
 			.filter((r): r is SpanPreviewRow => r !== null);

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

@@ -10,6 +10,7 @@ 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';
@@ -23,12 +24,10 @@ 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';
@@ -226,26 +225,15 @@ function TraceDetailsHeader({
 				</div>
 			)}
 
-			{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>
-			)}
+			<FieldsSelector
+				isOpen={isPreviewFieldsOpen}
+				title="Preview fields"
+				fields={previewFields}
+				onFieldsChange={setPreviewFields}
+				onClose={(): void => setIsPreviewFieldsOpen(false)}
+				signal={DataSource.TRACES}
+				maxFields={10}
+			/>
 
 			<AnalyticsPanel
 				isOpen={isAnalyticsOpen}

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

@@ -9,10 +9,7 @@ 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,
-	toTelemetryFieldKey,
-} from '../utils/previewFields';
+import { mergeTelemetryFieldKeys } from '../utils/previewFields';
 import { FLAMEGRAPH_SPAN_LIMIT } from './constants';
 import FlamegraphCanvas from './FlamegraphCanvas';
 import { useVisualLayoutWorker } from './hooks/useVisualLayoutWorker';
@@ -60,11 +57,7 @@ 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.map(toTelemetryFieldKey),
-			),
+		() => mergeTelemetryFieldKeys(COLOR_BY_FIELDS, previewFields),
 		[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.key))
+				.filter((field) => !RESERVED_PREVIEW_KEYS.has(field.name))
 				.map((field) => {
 					const value = getSpanAttribute(
 						{ resource: span.resource, attributes: span.attributes },
-						field.key,
+						field.name,
 					);
 					return value !== undefined && value !== ''
-						? { key: field.key, value: String(value) }
+						? { key: field.name, value: String(value) }
 						: null;
 				})
 				.filter((r): r is SpanPreviewRowData => r !== null),

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

@@ -1,149 +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 { 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/stores/traceStore.ts

@@ -15,6 +15,7 @@ import {
 	AGGREGATIONS,
 	getAggregationMap as findAggregationMap,
 } from '../utils/aggregations';
+import { toTelemetryFieldKey } from '../utils/previewFields';
 
 interface MutateOptions {
 	onSuccess?: () => void;
@@ -37,7 +38,7 @@ interface TraceStoreState {
 	// --- Derived state (cached for reference stability) ---
 	colorByField: TelemetryFieldKey;
 	availableColorByOptions: ColorByOption[];
-	previewFields: BaseAutocompleteData[];
+	previewFields: TelemetryFieldKey[];
 
 	// --- Setters used only by TraceStoreSync ---
 	setAggregations: (
@@ -51,7 +52,7 @@ interface TraceStoreState {
 
 	// --- Public actions (called from components) ---
 	setColorByField: (field: TelemetryFieldKey) => void;
-	setPreviewFields: (next: BaseAutocompleteData[]) => void;
+	setPreviewFields: (next: TelemetryFieldKey[]) => void;
 }
 
 /**
@@ -105,21 +106,31 @@ function deriveColorState(
 }
 
 /**
- * Reads preview fields from user preferences and filters out malformed entries.
+ * 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.
  */
 function derivePreviewFields(
 	userPreferences: UserPreference[] | null,
-): BaseAutocompleteData[] {
+): TelemetryFieldKey[] {
 	const pref = userPreferences?.find(
 		(p) => p.name === USER_PREFERENCES.SPAN_DETAILS_PREVIEW_ATTRIBUTES,
 	);
-	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',
-	);
+	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;
 }
 
 export const useTraceStore = create<TraceStoreState>()((set, get) => ({

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

@@ -41,8 +41,9 @@ function mapFieldDataType(
 }
 
 /**
- * Convert a picker-shaped field to the API's `TelemetryFieldKey` shape used
- * for `selectFields` on the flamegraph request.
+ * 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`.
  */
 export function toTelemetryFieldKey(
 	field: BaseAutocompleteData,
@@ -51,6 +52,7 @@ export function toTelemetryFieldKey(
 		name: field.key,
 		fieldContext: mapFieldContext(field.type),
 		fieldDataType: mapFieldDataType(field.dataType),
+		isIndexed: field.isIndexed,
 	};
 }
 

frontend/src/providers/QueryBuilder.tsx

@@ -1024,57 +1024,49 @@ export function QueryBuilderProvider({
 		[],
 	);
 
-	// `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',
-						},
-					})),
-				},
-			};
+	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',
+					},
+				})),
+			},
+		};
 
-			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,16 +26,6 @@ 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,
@@ -43,7 +33,6 @@ 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: (overrideQuery?: Query) => void;
+	handleRunQuery: () => void;
 	resetQuery: (newCurrentQuery?: QueryState) => void;
 	handleOnUnitsChange: (units: Format['id']) => void;
 	updateAllQueriesOperators: (