Merge branch 'main' into nv/schema-changes

docs/api/openapi.yml

@@ -2437,17 +2437,6 @@ components:
         url:
           type: string
       type: object
-    DashboardTextVariableSpec:
-      properties:
-        constant:
-          type: boolean
-        display:
-          $ref: '#/components/schemas/VariableDisplay'
-        name:
-          type: string
-        value:
-          type: string
-      type: object
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -2812,9 +2801,16 @@ components:
             type: string
           nullable: true
           type: object
+        mode:
+          $ref: '#/components/schemas/DashboardtypesLegendMode'
         position:
           $ref: '#/components/schemas/DashboardtypesLegendPosition'
       type: object
+    DashboardtypesLegendMode:
+      enum:
+      - list
+      - table
+      type: string
     DashboardtypesLegendPosition:
       enum:
       - bottom
@@ -2865,6 +2861,7 @@ components:
         display:
           $ref: '#/components/schemas/DashboardtypesDisplay'
         name:
+          minLength: 1
           type: string
         plugin:
           $ref: '#/components/schemas/DashboardtypesVariablePlugin'
@@ -2872,7 +2869,7 @@ components:
           nullable: true
           type: string
       required:
-      - display
+      - name
       type: object
     DashboardtypesListableDashboardForUserV2:
       properties:
@@ -3383,8 +3380,13 @@ components:
     DashboardtypesSpanGaps:
       properties:
         fillLessThan:
+          description: The maximum gap size to connect when fillOnlyBelow is true.
+            Gaps larger than this duration are left disconnected.
           type: string
         fillOnlyBelow:
+          description: Controls whether lines connect across null values. When false
+            (default), all gaps are connected. When true, only gaps smaller than fillLessThan
+            are connected.
           type: boolean
       type: object
     DashboardtypesStorableDashboardData:
@@ -3432,6 +3434,20 @@ components:
       - color
       - columnName
       type: object
+    DashboardtypesTextVariableSpec:
+      properties:
+        constant:
+          type: boolean
+        display:
+          $ref: '#/components/schemas/DashboardtypesDisplay'
+        name:
+          minLength: 1
+          type: string
+        value:
+          type: string
+      required:
+      - name
+      type: object
     DashboardtypesThresholdFormat:
       enum:
       - text
@@ -3451,7 +3467,6 @@ components:
       required:
       - value
       - color
-      - label
       type: object
     DashboardtypesTimePreference:
       enum:
@@ -3536,23 +3551,11 @@ components:
       discriminator:
         mapping:
           ListVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-          TextVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
+          TextVariable: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec'
         propertyName: kind
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
-      type: object
-    DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec:
-      properties:
-        kind:
-          enum:
-          - TextVariable
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardTextVariableSpec'
-      required:
-      - kind
-      - spec
+      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec'
       type: object
     DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec:
       properties:
@@ -3566,6 +3569,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec:
+      properties:
+        kind:
+          enum:
+          - TextVariable
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesTextVariableSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesVariablePlugin:
       discriminator:
         mapping:
@@ -7651,15 +7666,6 @@ components:
       type: object
     VariableDefaultValue:
       type: object
-    VariableDisplay:
-      properties:
-        description:
-          type: string
-        hidden:
-          type: boolean
-        name:
-          type: string
-      type: object
     ZeustypesGettableHost:
       properties:
         hosts:

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -3154,37 +3154,6 @@ export interface DashboardLinkDTO {
 	url?: string;
 }
 
-export interface VariableDisplayDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type boolean
-	 */
-	hidden?: boolean;
-	/**
-	 * @type string
-	 */
-	name?: string;
-}
-
-export interface DashboardTextVariableSpecDTO {
-	/**
-	 * @type boolean
-	 */
-	constant?: boolean;
-	display?: VariableDisplayDTO;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	value?: string;
-}
-
 export interface DashboardtypesAxesDTO {
 	/**
 	 * @type boolean
@@ -3216,6 +3185,10 @@ export interface DashboardtypesPanelFormattingDTO {
 	unit?: string;
 }
 
+export enum DashboardtypesLegendModeDTO {
+	list = 'list',
+	table = 'table',
+}
 export enum DashboardtypesLegendPositionDTO {
 	bottom = 'bottom',
 	right = 'right',
@@ -3235,6 +3208,7 @@ export interface DashboardtypesLegendDTO {
 	 * @type object,null
 	 */
 	customColors?: DashboardtypesLegendDTOCustomColors;
+	mode?: DashboardtypesLegendModeDTO;
 	position?: DashboardtypesLegendPositionDTO;
 }
 
@@ -3246,7 +3220,7 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	/**
 	 * @type string
 	 */
-	label: string;
+	label?: string;
 	/**
 	 * @type string
 	 */
@@ -3911,10 +3885,12 @@ export enum DashboardtypesLineStyleDTO {
 export interface DashboardtypesSpanGapsDTO {
 	/**
 	 * @type string
+	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
 	 */
 	fillLessThan?: string;
 	/**
 	 * @type boolean
+	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
 	 */
 	fillOnlyBelow?: boolean;
 }
@@ -4564,11 +4540,12 @@ export interface DashboardtypesListVariableSpecDTO {
 	 */
 	customAllValue?: string;
 	defaultValue?: VariableDefaultValueDTO;
-	display: DashboardtypesDisplayDTO;
+	display?: DashboardtypesDisplayDTO;
 	/**
 	 * @type string
+	 * @minLength 1
 	 */
-	name?: string;
+	name: string;
 	plugin?: DashboardtypesVariablePluginDTO;
 	/**
 	 * @type string,null
@@ -4585,21 +4562,38 @@ export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDash
 	spec: DashboardtypesListVariableSpecDTO;
 }
 
-export enum DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind {
+export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind {
 	TextVariable = 'TextVariable',
 }
-export interface DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO {
+export interface DashboardtypesTextVariableSpecDTO {
+	/**
+	 * @type boolean
+	 */
+	constant?: boolean;
+	display?: DashboardtypesDisplayDTO;
+	/**
+	 * @type string
+	 * @minLength 1
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	value?: string;
+}
+
+export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTO {
 	/**
 	 * @enum TextVariable
 	 * @type string
 	 */
-	kind: DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind;
-	spec: DashboardTextVariableSpecDTO;
+	kind: DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind;
+	spec: DashboardtypesTextVariableSpecDTO;
 }
 
 export type DashboardtypesVariableDTO =
 	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO
-	| DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO;
+	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTO;
 
 export interface DashboardtypesDashboardSpecDTO {
 	/**

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -1,29 +1,67 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
 import { Input } from '@signozhq/ui/input';
-import { Skeleton } from 'antd';
+import { Button, Skeleton } from 'antd';
+import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
+import { OPERATORS } from 'constants/antlrQueryConstants';
+import {
+	DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { cloneDeep, isArray, isFunction } from 'lodash-es';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
 
-import CheckboxFilterHeader from './CheckboxFilterHeader';
-import CheckboxValueRow from './CheckboxValueRow';
 import LogsQuickFilterEmptyState from './LogsQuickFilterEmptyState';
-import useActiveQueryIndex from './useActiveQueryIndex';
-import useCheckboxDisclosure from './useCheckboxDisclosure';
-import useCheckboxFilterActions from './useCheckboxFilterActions';
-import useCheckboxFilterState from './useCheckboxFilterState';
-import useCheckboxFilterValues from './useCheckboxFilterValues';
+import { isKeyMatch } from './utils';
 
 import './Checkbox.styles.scss';
 
+const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
+const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
+
 const SOURCES_WITH_EMPTY_STATE_ENABLED = [QuickFiltersSource.LOGS_EXPLORER];
 
+// Sources that use backend APIs expecting short operator format (e.g., 'nin' instead of 'not in')
+const SOURCES_WITH_SHORT_OPERATORS = [QuickFiltersSource.INFRA_MONITORING];
+
+/**
+ * Returns the correct NOT_IN operator value based on source.
+ * InfraMonitoring backend expects 'nin', others expect 'not in'.
+ */
+function getNotInOperator(source: QuickFiltersSource): string {
+	if (SOURCES_WITH_SHORT_OPERATORS.includes(source)) {
+		return 'nin';
+	}
+	return getOperatorValue('NOT_IN');
+}
+
+function setDefaultValues(
+	values: string[],
+	trueOrFalse: boolean,
+): Record<string, boolean> {
+	const defaultState: Record<string, boolean> = {};
+	values.forEach((val) => {
+		defaultState[val] = trueOrFalse;
+	});
+	return defaultState;
+}
 interface ICheckboxProps {
 	filter: IQuickFiltersConfig;
 	source: QuickFiltersSource;
@@ -34,39 +72,194 @@ interface ICheckboxProps {
 export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	const { source, filter, onFilterChange } = props;
 	const [searchText, setSearchText] = useState<string>('');
-
-	const activeQueryIndex = useActiveQueryIndex(source);
+	// null = no user action, true = user opened, false = user closed
+	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
+	const [visibleItemsCount, setVisibleItemsCount] = useState<number>(10);
 
 	const {
-		isOpen,
+		lastUsedQuery,
+		currentQuery,
+		redirectWithQueryBuilderData,
+		panelType,
+	} = useQueryBuilder();
+
+	// Determine if we're in ListView mode
+	const isListView = panelType === PANEL_TYPES.LIST;
+	// In ListView mode, use index 0 for most sources; for TRACES_EXPLORER, use lastUsedQuery
+	// Otherwise use lastUsedQuery for non-ListView modes
+	const activeQueryIndex = useMemo(() => {
+		if (isListView) {
+			return source === QuickFiltersSource.TRACES_EXPLORER
+				? lastUsedQuery || 0
+				: 0;
+		}
+		return lastUsedQuery || 0;
+	}, [isListView, source, lastUsedQuery]);
+
+	// Check if this filter has active filters in the query
+	const isSomeFilterPresentForCurrentAttribute = useMemo(
+		() =>
+			currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items?.some(
+				(item) => isKeyMatch(item.key?.key, filter.attributeKey.key),
+			),
+		[currentQuery.builder.queryData, activeQueryIndex, filter.attributeKey.key],
+	);
+
+	// Derive isOpen from filter state + user action
+	const isOpen = useMemo(() => {
+		// If user explicitly toggled, respect that
+		if (userToggleState !== null) {
+			return userToggleState;
+		}
+
+		// Auto-open if this filter has active filters in the query
+		if (isSomeFilterPresentForCurrentAttribute) {
+			return true;
+		}
+
+		// Otherwise use default behavior (first 2 filters open)
+		return filter.defaultOpen;
+	}, [
+		userToggleState,
 		isSomeFilterPresentForCurrentAttribute,
-		visibleItemsCount,
-		onToggleOpen,
-		onShowMore,
-	} = useCheckboxDisclosure({ filter, activeQueryIndex });
+		filter.defaultOpen,
+	]);
 
-	const { attributeValues, isLoading } = useCheckboxFilterValues({
-		filter,
-		source,
-		searchText,
-		isOpen,
-	});
+	const { data, isLoading } = useGetAggregateValues(
+		{
+			aggregateOperator: filter.aggregateOperator || 'noop',
+			dataSource: filter.dataSource || DataSource.LOGS,
+			aggregateAttribute: filter.aggregateAttribute || '',
+			attributeKey: filter.attributeKey.key,
+			filterAttributeKeyDataType: filter.attributeKey.dataType || DataTypes.EMPTY,
+			tagType: filter.attributeKey.type || '',
+			searchText: searchText ?? '',
+		},
+		{
+			enabled: isOpen && source !== QuickFiltersSource.METER_EXPLORER,
+			keepPreviousData: true,
+		},
+	);
 
-	const { currentFilterState, isFilterDisabled, isMultipleValuesTrueForTheKey } =
-		useCheckboxFilterState({ filter, attributeValues, activeQueryIndex });
+	const { data: keyValueSuggestions, isLoading: isLoadingKeyValueSuggestions } =
+		useGetQueryKeyValueSuggestions({
+			key: filter.attributeKey.key,
+			signal: filter.dataSource || DataSource.LOGS,
+			signalSource: 'meter',
+			options: {
+				enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
+				keepPreviousData: true,
+			},
+		});
 
-	const { onChange, onClear } = useCheckboxFilterActions({
-		filter,
-		source,
-		attributeValues,
-		activeQueryIndex,
-		onFilterChange,
-	});
+	const attributeValues: string[] = useMemo(() => {
+		const dataType = filter.attributeKey.dataType || DataTypes.String;
+
+		if (source === QuickFiltersSource.METER_EXPLORER && keyValueSuggestions) {
+			// Process the response data
+			const responseData = keyValueSuggestions?.data as any;
+			const values = responseData.data?.values || {};
+			const stringValues = values.stringValues || [];
+			const numberValues = values.numberValues || [];
+
+			// Generate options from string values - explicitly handle empty strings
+			const stringOptions = stringValues
+				// Strict filtering for empty string - we'll handle it as a special case if needed
+				.filter(
+					(value: string | null | undefined): value is string =>
+						value !== null && value !== undefined && value !== '',
+				);
+
+			// Generate options from number values
+			const numberOptions = numberValues
+				.filter(
+					(value: number | null | undefined): value is number =>
+						value !== null && value !== undefined,
+				)
+				.map((value: number) => value.toString());
+
+			// Combine all options and make sure we don't have duplicate labels
+			return [...stringOptions, ...numberOptions];
+		}
+
+		const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
+		return (data?.payload?.[key] || []).filter(
+			(val) => val !== undefined && val !== null,
+		);
+	}, [data?.payload, filter.attributeKey.dataType, keyValueSuggestions, source]);
 
 	const setSearchTextDebounced = useDebouncedFn((...args) => {
 		setSearchText(args[0] as string);
 	}, DEBOUNCE_DELAY);
 
+	// derive the state of each filter key here in the renderer itself and keep it in sync with current query
+	// also we need to keep a note of last focussed query.
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const currentFilterState = useMemo(() => {
+		let filterState: Record<string, boolean> = setDefaultValues(
+			attributeValues,
+			false,
+		);
+		const filterSync = currentQuery?.builder.queryData?.[
+			activeQueryIndex
+		]?.filters?.items.find((item) =>
+			isKeyMatch(item.key?.key, filter.attributeKey.key),
+		);
+
+		if (filterSync) {
+			if (SELECTED_OPERATORS.includes(filterSync.op)) {
+				if (isArray(filterSync.value)) {
+					filterSync.value.forEach((val) => {
+						filterState[String(val)] = true;
+					});
+				} else if (typeof filterSync.value === 'string') {
+					filterState[filterSync.value] = true;
+				} else if (typeof filterSync.value === 'boolean') {
+					filterState[String(filterSync.value)] = true;
+				} else if (typeof filterSync.value === 'number') {
+					filterState[String(filterSync.value)] = true;
+				}
+			} else if (NON_SELECTED_OPERATORS.includes(filterSync.op)) {
+				filterState = setDefaultValues(attributeValues, true);
+				if (isArray(filterSync.value)) {
+					filterSync.value.forEach((val) => {
+						filterState[String(val)] = false;
+					});
+				} else if (typeof filterSync.value === 'string') {
+					filterState[filterSync.value] = false;
+				} else if (typeof filterSync.value === 'boolean') {
+					filterState[String(filterSync.value)] = false;
+				} else if (typeof filterSync.value === 'number') {
+					filterState[String(filterSync.value)] = false;
+				}
+			}
+		} else {
+			filterState = setDefaultValues(attributeValues, true);
+		}
+		return filterState;
+	}, [
+		attributeValues,
+		currentQuery?.builder.queryData,
+		filter.attributeKey,
+		activeQueryIndex,
+	]);
+
+	// disable the filter when there are multiple entries of the same attribute key present in the filter bar
+	const isFilterDisabled = useMemo(
+		() =>
+			(currentQuery?.builder?.queryData?.[
+				activeQueryIndex
+			]?.filters?.items?.filter((item) =>
+				isKeyMatch(item.key?.key, filter.attributeKey.key),
+			)?.length || 0) > 1,
+
+		[currentQuery?.builder?.queryData, activeQueryIndex, filter.attributeKey],
+	);
+
+	// variable to check if the current filter has multiple values to its name in the key op value section
+	const isMultipleValuesTrueForTheKey =
+		Object.values(currentFilterState).filter((val) => val).length > 1;
+
 	// Sort checked items to the top, then unchecked items
 	const currentAttributeKeys = useMemo(() => {
 		const checkedValues = attributeValues.filter(
@@ -84,6 +277,293 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		[currentAttributeKeys, currentFilterState],
 	);
 
+	const handleClearFilterAttribute = (): void => {
+		const preparedQuery: Query = {
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: currentQuery.builder.queryData.map((item, idx) => ({
+					...item,
+					filter: {
+						expression: removeKeysFromExpression(item.filter?.expression ?? '', [
+							filter.attributeKey.key,
+						]),
+					},
+					filters: {
+						...item.filters,
+						items:
+							idx === activeQueryIndex
+								? item.filters?.items?.filter(
+										(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
+									) || []
+								: [...(item.filters?.items || [])],
+						op: item.filters?.op || 'AND',
+					},
+				})),
+			},
+		};
+
+		if (onFilterChange && isFunction(onFilterChange)) {
+			onFilterChange(preparedQuery);
+		} else {
+			redirectWithQueryBuilderData(preparedQuery);
+		}
+	};
+
+	const onChange = (
+		value: string,
+		checked: boolean,
+		isOnlyOrAllClicked: boolean,
+		// eslint-disable-next-line sonarjs/cognitive-complexity
+	): void => {
+		const query = cloneDeep(currentQuery.builder.queryData?.[activeQueryIndex]);
+
+		// if only or all are clicked we do not need to worry about anything just override whatever we have
+		// by either adding a new IN operator value clause in case of ONLY or remove everything we have for ALL.
+		if (isOnlyOrAllClicked && query?.filters?.items) {
+			const isOnlyOrAll = isSomeFilterPresentForCurrentAttribute
+				? currentFilterState[value] && !isMultipleValuesTrueForTheKey
+					? 'All'
+					: 'Only'
+				: 'Only';
+			query.filters.items = query.filters.items.filter(
+				(q) => !isKeyMatch(q.key?.key, filter.attributeKey.key),
+			);
+
+			if (query.filter?.expression) {
+				query.filter.expression = removeKeysFromExpression(
+					query.filter.expression,
+					[filter.attributeKey.key],
+				);
+			}
+
+			if (isOnlyOrAll === 'Only') {
+				const newFilterItem: TagFilterItem = {
+					id: uuid(),
+					op: getOperatorValue(OPERATORS.IN),
+					key: filter.attributeKey,
+					value,
+				};
+				query.filters.items = [...query.filters.items, newFilterItem];
+			}
+		} else if (query?.filters?.items) {
+			if (
+				query.filters?.items?.some((item) =>
+					isKeyMatch(item.key?.key, filter.attributeKey.key),
+				)
+			) {
+				// if there is already a running filter for the current attribute key then
+				// we split the cases by which particular operator is present right now!
+				const currentFilter = query.filters?.items?.find((q) =>
+					isKeyMatch(q.key?.key, filter.attributeKey.key),
+				);
+				if (currentFilter) {
+					const runningOperator = currentFilter?.op;
+					switch (runningOperator) {
+						case 'in':
+							if (checked) {
+								// if it's an IN operator then if we are checking another value it get's added to the
+								// filter clause. example -  key IN [value1, currentSelectedValue]
+								if (isArray(currentFilter.value)) {
+									const newFilter = {
+										...currentFilter,
+										value: [...currentFilter.value, value],
+									};
+									query.filters.items = query.filters.items.map((item) => {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								} else {
+									// if the current state wasn't an array we make it one and add our value
+									const newFilter = {
+										...currentFilter,
+										value: [currentFilter.value as string, value],
+									};
+									query.filters.items = query.filters.items.map((item) => {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								}
+							} else if (!checked) {
+								// if we are removing some value when the running operator is IN we filter.
+								// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
+								if (isArray(currentFilter.value)) {
+									const newFilter = {
+										...currentFilter,
+										value: currentFilter.value.filter((val) => val !== value),
+									};
+
+									if (newFilter.value.length === 0) {
+										query.filters.items = query.filters.items.filter(
+											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+										);
+									} else {
+										query.filters.items = query.filters.items.map((item) => {
+											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+												return newFilter;
+											}
+											return item;
+										});
+									}
+								} else {
+									// if not an array remove the whole thing altogether!
+									query.filters.items = query.filters.items.filter(
+										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+									);
+								}
+							}
+							break;
+						case 'nin':
+						case 'not in':
+							// if the current running operator is NIN then when unchecking the value it gets
+							// added to the clause like key NIN [value1 , currentUnselectedValue]
+							if (!checked) {
+								// in case of array add the currentUnselectedValue to the list.
+								if (isArray(currentFilter.value)) {
+									const newFilter = {
+										...currentFilter,
+										value: [...currentFilter.value, value],
+									};
+									query.filters.items = query.filters.items.map((item) => {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								} else {
+									// in case of not an array make it one!
+									const newFilter = {
+										...currentFilter,
+										value: [currentFilter.value as string, value],
+									};
+									query.filters.items = query.filters.items.map((item) => {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								}
+							} else if (checked) {
+								// opposite of above!
+								if (isArray(currentFilter.value)) {
+									const newFilter = {
+										...currentFilter,
+										value: currentFilter.value.filter((val) => val !== value),
+									};
+									if (newFilter.value.length === 0) {
+										query.filters.items = query.filters.items.filter(
+											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+										);
+										if (query.filter?.expression) {
+											query.filter.expression = removeKeysFromExpression(
+												query.filter.expression,
+												[filter.attributeKey.key],
+											);
+										}
+									} else {
+										query.filters.items = query.filters.items.map((item) => {
+											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+												return newFilter;
+											}
+											return item;
+										});
+									}
+								} else {
+									const newFilter = {
+										...currentFilter,
+										value: currentFilter.value === value ? null : currentFilter.value,
+									};
+									if (newFilter.value === null && query.filter?.expression) {
+										query.filter.expression = removeKeysFromExpression(
+											query.filter.expression,
+											[filter.attributeKey.key],
+										);
+									}
+									query.filters.items = query.filters.items.filter(
+										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+									);
+								}
+							}
+							break;
+						case '=':
+							if (checked) {
+								const newFilter = {
+									...currentFilter,
+									op: getOperatorValue(OPERATORS.IN),
+									value: [currentFilter.value as string, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							} else if (!checked) {
+								query.filters.items = query.filters.items.filter(
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+								);
+							}
+							break;
+						case '!=':
+							if (!checked) {
+								const newFilter = {
+									...currentFilter,
+									op: getNotInOperator(source),
+									value: [currentFilter.value as string, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							} else if (checked) {
+								query.filters.items = query.filters.items.filter(
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+								);
+							}
+							break;
+						default:
+							break;
+					}
+				}
+			} else {
+				// case  - when there is no filter for the current key that means all are selected right now.
+				const newFilterItem: TagFilterItem = {
+					id: uuid(),
+					op: getNotInOperator(source),
+					key: filter.attributeKey,
+					value,
+				};
+				query.filters.items = [...query.filters.items, newFilterItem];
+			}
+		}
+		const finalQuery = {
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: [
+					...currentQuery.builder.queryData.map((q, idx) => {
+						if (idx === activeQueryIndex) {
+							return query;
+						}
+						return q;
+					}),
+				],
+			},
+		};
+
+		if (onFilterChange && isFunction(onFilterChange)) {
+			onFilterChange(finalQuery);
+		} else {
+			redirectWithQueryBuilderData(finalQuery);
+		}
+	};
+
 	const isEmptyStateWithDocsEnabled =
 		SOURCES_WITH_EMPTY_STATE_ENABLED.includes(source) &&
 		!searchText &&
@@ -91,19 +571,48 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 
 	return (
 		<div className="checkbox-filter">
-			<CheckboxFilterHeader
-				title={filter.title}
-				isOpen={isOpen}
-				showClearAll={!!attributeValues.length}
-				onToggleOpen={onToggleOpen}
-				onClear={onClear}
-			/>
-			{isOpen && isLoading && !attributeValues.length && (
-				<section className="loading">
-					<Skeleton paragraph={{ rows: 4 }} />
+			<section
+				className="filter-header-checkbox"
+				onClick={(): void => {
+					if (isOpen) {
+						setUserToggleState(false);
+						setVisibleItemsCount(10);
+					} else {
+						setUserToggleState(true);
+					}
+				}}
+			>
+				<section className="left-action">
+					{isOpen ? (
+						<ChevronDown size={13} cursor="pointer" />
+					) : (
+						<ChevronRight size={13} cursor="pointer" />
+					)}
+					<Typography.Text className="title">{filter.title}</Typography.Text>
 				</section>
-			)}
-			{isOpen && !isLoading && (
+				<section className="right-action">
+					{isOpen && !!attributeValues.length && (
+						<Typography.Text
+							className="clear-all"
+							onClick={(e): void => {
+								e.stopPropagation();
+								e.preventDefault();
+								handleClearFilterAttribute();
+							}}
+						>
+							Clear All
+						</Typography.Text>
+					)}
+				</section>
+			</section>
+			{isOpen &&
+				(isLoading || isLoadingKeyValueSuggestions) &&
+				!attributeValues.length && (
+					<section className="loading">
+						<Skeleton paragraph={{ rows: 4 }} />
+					</section>
+				)}
+			{isOpen && !isLoading && !isLoadingKeyValueSuggestions && (
 				<>
 					{!isEmptyStateWithDocsEnabled && (
 						<section className="search">
@@ -125,24 +634,48 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 											data-testid="filter-separator"
 										/>
 									)}
-									<CheckboxValueRow
-										value={value}
-										checked={currentFilterState[value]}
-										disabled={isFilterDisabled}
-										title={filter.title}
-										onlyButtonLabel={
-											isSomeFilterPresentForCurrentAttribute
-												? currentFilterState[value] && !isMultipleValuesTrueForTheKey
-													? 'All'
-													: 'Only'
-												: 'Only'
-										}
-										customRendererForValue={filter.customRendererForValue}
-										onCheckboxChange={(checked): void => onChange(value, checked, false)}
-										onOnlyOrAllClick={(): void =>
-											onChange(value, currentFilterState[value], true)
-										}
-									/>
+									<div className="value">
+										<Checkbox
+											onChange={(checked): void =>
+												onChange(value, checked === true, false)
+											}
+											value={currentFilterState[value]}
+											disabled={isFilterDisabled}
+											className="check-box"
+										/>
+
+										<div
+											className={cx(
+												'checkbox-value-section',
+												isFilterDisabled ? 'filter-disabled' : '',
+											)}
+											onClick={(): void => {
+												if (isFilterDisabled) {
+													return;
+												}
+												onChange(value, currentFilterState[value], true);
+											}}
+										>
+											<div className={`${filter.title} label-${value}`} />
+											{filter.customRendererForValue ? (
+												filter.customRendererForValue(value)
+											) : (
+												<Typography.Text className="value-string" truncate={1}>
+													{String(value)}
+												</Typography.Text>
+											)}
+											<Button type="text" className="only-btn">
+												{isSomeFilterPresentForCurrentAttribute
+													? currentFilterState[value] && !isMultipleValuesTrueForTheKey
+														? 'All'
+														: 'Only'
+													: 'Only'}
+											</Button>
+											<Button type="text" className="toggle-btn">
+												Toggle
+											</Button>
+										</div>
+									</div>
 								</Fragment>
 							))}
 						</section>
@@ -155,7 +688,10 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					)}
 					{visibleItemsCount < attributeValues?.length && (
 						<section className="show-more">
-							<Typography.Text className="show-more-text" onClick={onShowMore}>
+							<Typography.Text
+								className="show-more-text"
+								onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
+							>
 								Show More...
 							</Typography.Text>
 						</section>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxFilterHeader.tsx

@@ -1,47 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-
-interface CheckboxFilterHeaderProps {
-	title: string;
-	isOpen: boolean;
-	showClearAll: boolean;
-	onToggleOpen: () => void;
-	onClear: () => void;
-}
-
-function CheckboxFilterHeader({
-	title,
-	isOpen,
-	showClearAll,
-	onToggleOpen,
-	onClear,
-}: CheckboxFilterHeaderProps): JSX.Element {
-	return (
-		<section className="filter-header-checkbox" onClick={onToggleOpen}>
-			<section className="left-action">
-				{isOpen ? (
-					<ChevronDown size={13} cursor="pointer" />
-				) : (
-					<ChevronRight size={13} cursor="pointer" />
-				)}
-				<Typography.Text className="title">{title}</Typography.Text>
-			</section>
-			<section className="right-action">
-				{isOpen && showClearAll && (
-					<Typography.Text
-						className="clear-all"
-						onClick={(e): void => {
-							e.stopPropagation();
-							e.preventDefault();
-							onClear();
-						}}
-					>
-						Clear All
-					</Typography.Text>
-				)}
-			</section>
-		</section>
-	);
-}
-
-export default CheckboxFilterHeader;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxValueRow.tsx

@@ -1,68 +0,0 @@
-import { Button } from 'antd';
-import { Checkbox } from '@signozhq/ui/checkbox';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-interface CheckboxValueRowProps {
-	value: string;
-	checked: boolean;
-	disabled: boolean;
-	title: string;
-	onlyButtonLabel: string;
-	customRendererForValue?: (value: string) => JSX.Element;
-	onCheckboxChange: (checked: boolean) => void;
-	onOnlyOrAllClick: () => void;
-}
-
-function CheckboxValueRow({
-	value,
-	checked,
-	disabled,
-	title,
-	onlyButtonLabel,
-	customRendererForValue,
-	onCheckboxChange,
-	onOnlyOrAllClick,
-}: CheckboxValueRowProps): JSX.Element {
-	return (
-		<div className="value">
-			<Checkbox
-				onChange={(isChecked): void => onCheckboxChange(isChecked === true)}
-				value={checked}
-				disabled={disabled}
-				className="check-box"
-			/>
-
-			<div
-				className={cx('checkbox-value-section', disabled ? 'filter-disabled' : '')}
-				onClick={(): void => {
-					if (disabled) {
-						return;
-					}
-					onOnlyOrAllClick();
-				}}
-			>
-				<div className={`${title} label-${value}`} />
-				{customRendererForValue ? (
-					customRendererForValue(value)
-				) : (
-					<Typography.Text className="value-string" truncate={1}>
-						{String(value)}
-					</Typography.Text>
-				)}
-				<Button type="text" className="only-btn">
-					{onlyButtonLabel}
-				</Button>
-				<Button type="text" className="toggle-btn">
-					Toggle
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-CheckboxValueRow.defaultProps = {
-	customRendererForValue: undefined,
-};
-
-export default CheckboxValueRow;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts

@@ -1,417 +0,0 @@
-/* eslint-disable sonarjs/no-identical-functions */
-import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
-import {
-	IQuickFiltersConfig,
-	QuickFiltersSource,
-} from 'components/QuickFilters/types';
-import { OPERATORS } from 'constants/antlrQueryConstants';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { cloneDeep, isArray } from 'lodash-es';
-import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
-import { v4 as uuid } from 'uuid';
-
-import { isKeyMatch } from './utils';
-
-export const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
-export const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
-
-// Sources that use backend APIs expecting short operator format (e.g., 'nin' instead of 'not in')
-const SOURCES_WITH_SHORT_OPERATORS = [QuickFiltersSource.INFRA_MONITORING];
-
-/**
- * Returns the correct NOT_IN operator value based on source.
- * InfraMonitoring backend expects 'nin', others expect 'not in'.
- */
-export function getNotInOperator(source: QuickFiltersSource): string {
-	if (SOURCES_WITH_SHORT_OPERATORS.includes(source)) {
-		return 'nin';
-	}
-	return getOperatorValue('NOT_IN');
-}
-
-function setDefaultValues(
-	values: string[],
-	trueOrFalse: boolean,
-): Record<string, boolean> {
-	const defaultState: Record<string, boolean> = {};
-	values.forEach((val) => {
-		defaultState[val] = trueOrFalse;
-	});
-	return defaultState;
-}
-
-/**
- * Derives the checked/unchecked state for each attribute value by reading the
- * active filter clause for this attribute key out of the query.
- *
- * - No matching clause -> every value is checked (all selected).
- * - IN / `=` clause     -> only the listed values are checked.
- * - NOT IN / `!=` clause -> every value is checked except the excluded ones.
- */
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function deriveCheckboxState({
-	attributeValues,
-	filterItems,
-	filterKey,
-}: {
-	attributeValues: string[];
-	filterItems: TagFilterItem[] | undefined;
-	filterKey: string;
-}): Record<string, boolean> {
-	let filterState: Record<string, boolean> = setDefaultValues(
-		attributeValues,
-		false,
-	);
-	const filterSync = filterItems?.find((item) =>
-		isKeyMatch(item.key?.key, filterKey),
-	);
-
-	if (filterSync) {
-		if (SELECTED_OPERATORS.includes(filterSync.op)) {
-			if (isArray(filterSync.value)) {
-				filterSync.value.forEach((val) => {
-					filterState[String(val)] = true;
-				});
-			} else if (typeof filterSync.value === 'string') {
-				filterState[filterSync.value] = true;
-			} else if (typeof filterSync.value === 'boolean') {
-				filterState[String(filterSync.value)] = true;
-			} else if (typeof filterSync.value === 'number') {
-				filterState[String(filterSync.value)] = true;
-			}
-		} else if (NON_SELECTED_OPERATORS.includes(filterSync.op)) {
-			filterState = setDefaultValues(attributeValues, true);
-			if (isArray(filterSync.value)) {
-				filterSync.value.forEach((val) => {
-					filterState[String(val)] = false;
-				});
-			} else if (typeof filterSync.value === 'string') {
-				filterState[filterSync.value] = false;
-			} else if (typeof filterSync.value === 'boolean') {
-				filterState[String(filterSync.value)] = false;
-			} else if (typeof filterSync.value === 'number') {
-				filterState[String(filterSync.value)] = false;
-			}
-		}
-	} else {
-		filterState = setDefaultValues(attributeValues, true);
-	}
-	return filterState;
-}
-
-/**
- * Returns a new query with every clause for this attribute key removed, both
- * from the structured filter items and the raw filter expression.
- */
-export function clearFilterFromQuery({
-	currentQuery,
-	filter,
-	activeQueryIndex,
-}: {
-	currentQuery: Query;
-	filter: IQuickFiltersConfig;
-	activeQueryIndex: number;
-}): Query {
-	return {
-		...currentQuery,
-		builder: {
-			...currentQuery.builder,
-			queryData: currentQuery.builder.queryData.map((item, idx) => ({
-				...item,
-				filter: {
-					expression: removeKeysFromExpression(item.filter?.expression ?? '', [
-						filter.attributeKey.key,
-					]),
-				},
-				filters: {
-					...item.filters,
-					items:
-						idx === activeQueryIndex
-							? item.filters?.items?.filter(
-									(fil) => !isKeyMatch(fil.key?.key, filter.attributeKey.key),
-								) || []
-							: [...(item.filters?.items || [])],
-					op: item.filters?.op || 'AND',
-				},
-			})),
-		},
-	};
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function applyCheckboxToggle({
-	currentQuery,
-	activeQueryIndex,
-	filter,
-	source,
-	attributeValues,
-	value,
-	checked,
-	isOnlyOrAllClicked,
-}: {
-	currentQuery: Query;
-	activeQueryIndex: number;
-	filter: IQuickFiltersConfig;
-	source: QuickFiltersSource;
-	attributeValues: string[];
-	value: string;
-	checked: boolean;
-	isOnlyOrAllClicked: boolean;
-}): Query {
-	const activeItems =
-		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items;
-
-	const isSomeFilterPresentForCurrentAttribute = !!activeItems?.some((item) =>
-		isKeyMatch(item.key?.key, filter.attributeKey.key),
-	);
-
-	const currentFilterState = deriveCheckboxState({
-		attributeValues,
-		filterItems: activeItems,
-		filterKey: filter.attributeKey.key,
-	});
-
-	const isMultipleValuesTrueForTheKey =
-		Object.values(currentFilterState).filter((val) => val).length > 1;
-
-	const query = cloneDeep(currentQuery.builder.queryData?.[activeQueryIndex]);
-
-	// if only or all are clicked we do not need to worry about anything just override whatever we have
-	// by either adding a new IN operator value clause in case of ONLY or remove everything we have for ALL.
-	if (isOnlyOrAllClicked && query?.filters?.items) {
-		const isOnlyOrAll = isSomeFilterPresentForCurrentAttribute
-			? currentFilterState[value] && !isMultipleValuesTrueForTheKey
-				? 'All'
-				: 'Only'
-			: 'Only';
-		query.filters.items = query.filters.items.filter(
-			(q) => !isKeyMatch(q.key?.key, filter.attributeKey.key),
-		);
-
-		if (query.filter?.expression) {
-			query.filter.expression = removeKeysFromExpression(query.filter.expression, [
-				filter.attributeKey.key,
-			]);
-		}
-
-		if (isOnlyOrAll === 'Only') {
-			const newFilterItem: TagFilterItem = {
-				id: uuid(),
-				op: getOperatorValue(OPERATORS.IN),
-				key: filter.attributeKey,
-				value,
-			};
-			query.filters.items = [...query.filters.items, newFilterItem];
-		}
-	} else if (query?.filters?.items) {
-		if (
-			query.filters?.items?.some((item) =>
-				isKeyMatch(item.key?.key, filter.attributeKey.key),
-			)
-		) {
-			// if there is already a running filter for the current attribute key then
-			// we split the cases by which particular operator is present right now!
-			const currentFilter = query.filters?.items?.find((q) =>
-				isKeyMatch(q.key?.key, filter.attributeKey.key),
-			);
-			if (currentFilter) {
-				const runningOperator = currentFilter?.op;
-				switch (runningOperator) {
-					case 'in':
-						if (checked) {
-							// if it's an IN operator then if we are checking another value it get's added to the
-							// filter clause. example -  key IN [value1, currentSelectedValue]
-							if (isArray(currentFilter.value)) {
-								const newFilter = {
-									...currentFilter,
-									value: [...currentFilter.value, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-							} else {
-								// if the current state wasn't an array we make it one and add our value
-								const newFilter = {
-									...currentFilter,
-									value: [currentFilter.value as string, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-							}
-						} else if (!checked) {
-							// if we are removing some value when the running operator is IN we filter.
-							// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
-							if (isArray(currentFilter.value)) {
-								const newFilter = {
-									...currentFilter,
-									value: currentFilter.value.filter((val) => val !== value),
-								};
-
-								if (newFilter.value.length === 0) {
-									query.filters.items = query.filters.items.filter(
-										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-									);
-								} else {
-									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-											return newFilter;
-										}
-										return item;
-									});
-								}
-							} else {
-								// if not an array remove the whole thing altogether!
-								query.filters.items = query.filters.items.filter(
-									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-								);
-							}
-						}
-						break;
-					case 'nin':
-					case 'not in':
-						// if the current running operator is NIN then when unchecking the value it gets
-						// added to the clause like key NIN [value1 , currentUnselectedValue]
-						if (!checked) {
-							// in case of array add the currentUnselectedValue to the list.
-							if (isArray(currentFilter.value)) {
-								const newFilter = {
-									...currentFilter,
-									value: [...currentFilter.value, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-							} else {
-								// in case of not an array make it one!
-								const newFilter = {
-									...currentFilter,
-									value: [currentFilter.value as string, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-							}
-						} else if (checked) {
-							// opposite of above!
-							if (isArray(currentFilter.value)) {
-								const newFilter = {
-									...currentFilter,
-									value: currentFilter.value.filter((val) => val !== value),
-								};
-								if (newFilter.value.length === 0) {
-									query.filters.items = query.filters.items.filter(
-										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-									);
-									if (query.filter?.expression) {
-										query.filter.expression = removeKeysFromExpression(
-											query.filter.expression,
-											[filter.attributeKey.key],
-										);
-									}
-								} else {
-									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-											return newFilter;
-										}
-										return item;
-									});
-								}
-							} else {
-								const newFilter = {
-									...currentFilter,
-									value: currentFilter.value === value ? null : currentFilter.value,
-								};
-								if (newFilter.value === null && query.filter?.expression) {
-									query.filter.expression = removeKeysFromExpression(
-										query.filter.expression,
-										[filter.attributeKey.key],
-									);
-								}
-								query.filters.items = query.filters.items.filter(
-									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-								);
-							}
-						}
-						break;
-					case '=':
-						if (checked) {
-							const newFilter = {
-								...currentFilter,
-								op: getOperatorValue(OPERATORS.IN),
-								value: [currentFilter.value as string, value],
-							};
-							query.filters.items = query.filters.items.map((item) => {
-								if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-									return newFilter;
-								}
-								return item;
-							});
-						} else if (!checked) {
-							query.filters.items = query.filters.items.filter(
-								(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-							);
-						}
-						break;
-					case '!=':
-						if (!checked) {
-							const newFilter = {
-								...currentFilter,
-								op: getNotInOperator(source),
-								value: [currentFilter.value as string, value],
-							};
-							query.filters.items = query.filters.items.map((item) => {
-								if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-									return newFilter;
-								}
-								return item;
-							});
-						} else if (checked) {
-							query.filters.items = query.filters.items.filter(
-								(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-							);
-						}
-						break;
-					default:
-						break;
-				}
-			}
-		} else {
-			// case  - when there is no filter for the current key that means all are selected right now.
-			const newFilterItem: TagFilterItem = {
-				id: uuid(),
-				op: getNotInOperator(source),
-				key: filter.attributeKey,
-				value,
-			};
-			query.filters.items = [...query.filters.items, newFilterItem];
-		}
-	}
-
-	return {
-		...currentQuery,
-		builder: {
-			...currentQuery.builder,
-			queryData: [
-				...currentQuery.builder.queryData.map((q, idx) => {
-					if (idx === activeQueryIndex) {
-						return query;
-					}
-					return q;
-				}),
-			],
-		},
-	};
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useActiveQueryIndex.ts

@@ -1,27 +0,0 @@
-import { useMemo } from 'react';
-import { QuickFiltersSource } from 'components/QuickFilters/types';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-
-/**
- * Resolves which query-builder query index the checkbox filter reads from and
- * writes to.
- *
- * In ListView most sources use index 0; TRACES_EXPLORER and every non-ListView
- * mode track the last focused query.
- */
-function useActiveQueryIndex(source: QuickFiltersSource): number {
-	const { lastUsedQuery, panelType } = useQueryBuilder();
-	const isListView = panelType === PANEL_TYPES.LIST;
-
-	return useMemo(() => {
-		if (isListView) {
-			return source === QuickFiltersSource.TRACES_EXPLORER
-				? lastUsedQuery || 0
-				: 0;
-		}
-		return lastUsedQuery || 0;
-	}, [isListView, source, lastUsedQuery]);
-}
-
-export default useActiveQueryIndex;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxDisclosure.ts

@@ -1,90 +0,0 @@
-import { useMemo, useState } from 'react';
-import { IQuickFiltersConfig } from 'components/QuickFilters/types';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-
-import { isKeyMatch } from './utils';
-
-const DEFAULT_VISIBLE_ITEMS_COUNT = 10;
-
-interface UseCheckboxDisclosureProps {
-	filter: IQuickFiltersConfig;
-	activeQueryIndex: number;
-}
-
-interface UseCheckboxDisclosureReturn {
-	isOpen: boolean;
-	isSomeFilterPresentForCurrentAttribute: boolean;
-	visibleItemsCount: number;
-	onToggleOpen: () => void;
-	onShowMore: () => void;
-}
-
-/**
- * Owns the open/collapsed state of a checkbox filter section and how many
- * values are visible.
- *
- * Auto-opens when the query already has a clause for this attribute, otherwise
- * falls back to `filter.defaultOpen`. An explicit user toggle always wins.
- * Collapsing resets the visible count.
- */
-function useCheckboxDisclosure({
-	filter,
-	activeQueryIndex,
-}: UseCheckboxDisclosureProps): UseCheckboxDisclosureReturn {
-	const { currentQuery } = useQueryBuilder();
-	// null = no user action, true = user opened, false = user closed
-	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
-	const [visibleItemsCount, setVisibleItemsCount] = useState<number>(
-		DEFAULT_VISIBLE_ITEMS_COUNT,
-	);
-
-	const isSomeFilterPresentForCurrentAttribute = useMemo(
-		() =>
-			!!currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items?.some(
-				(item) => isKeyMatch(item.key?.key, filter.attributeKey.key),
-			),
-		[currentQuery.builder.queryData, activeQueryIndex, filter.attributeKey.key],
-	);
-
-	const isOpen = useMemo(() => {
-		// If user explicitly toggled, respect that
-		if (userToggleState !== null) {
-			return userToggleState;
-		}
-
-		// Auto-open if this filter has active filters in the query
-		if (isSomeFilterPresentForCurrentAttribute) {
-			return true;
-		}
-
-		// Otherwise use default behavior (first 2 filters open)
-		return filter.defaultOpen;
-	}, [
-		userToggleState,
-		isSomeFilterPresentForCurrentAttribute,
-		filter.defaultOpen,
-	]);
-
-	const onToggleOpen = (): void => {
-		if (isOpen) {
-			setUserToggleState(false);
-			setVisibleItemsCount(DEFAULT_VISIBLE_ITEMS_COUNT);
-		} else {
-			setUserToggleState(true);
-		}
-	};
-
-	const onShowMore = (): void => {
-		setVisibleItemsCount((prev) => prev + DEFAULT_VISIBLE_ITEMS_COUNT);
-	};
-
-	return {
-		isOpen,
-		isSomeFilterPresentForCurrentAttribute,
-		visibleItemsCount,
-		onToggleOpen,
-		onShowMore,
-	};
-}
-
-export default useCheckboxDisclosure;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxFilterActions.ts

@@ -1,78 +0,0 @@
-import {
-	IQuickFiltersConfig,
-	QuickFiltersSource,
-} from 'components/QuickFilters/types';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { isFunction } from 'lodash-es';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import {
-	applyCheckboxToggle,
-	clearFilterFromQuery,
-} from './checkboxFilterQuery';
-
-interface UseCheckboxFilterActionsProps {
-	filter: IQuickFiltersConfig;
-	source: QuickFiltersSource;
-	attributeValues: string[];
-	activeQueryIndex: number;
-	onFilterChange?: ((query: Query) => void) | null;
-}
-
-interface UseCheckboxFilterActionsReturn {
-	onChange: (
-		value: string,
-		checked: boolean,
-		isOnlyOrAllClicked: boolean,
-	) => void;
-	onClear: () => void;
-}
-
-/**
- * Wires the pure checkbox query algebra to query-builder dispatch: the
- * caller-provided `onFilterChange` when present, otherwise a URL redirect.
- */
-function useCheckboxFilterActions({
-	filter,
-	source,
-	attributeValues,
-	activeQueryIndex,
-	onFilterChange,
-}: UseCheckboxFilterActionsProps): UseCheckboxFilterActionsReturn {
-	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
-
-	const dispatch = (query: Query): void => {
-		if (onFilterChange && isFunction(onFilterChange)) {
-			onFilterChange(query);
-		} else {
-			redirectWithQueryBuilderData(query);
-		}
-	};
-
-	const onChange = (
-		value: string,
-		checked: boolean,
-		isOnlyOrAllClicked: boolean,
-	): void => {
-		dispatch(
-			applyCheckboxToggle({
-				currentQuery,
-				activeQueryIndex,
-				filter,
-				source,
-				attributeValues,
-				value,
-				checked,
-				isOnlyOrAllClicked,
-			}),
-		);
-	};
-
-	const onClear = (): void => {
-		dispatch(clearFilterFromQuery({ currentQuery, filter, activeQueryIndex }));
-	};
-
-	return { onChange, onClear };
-}
-
-export default useCheckboxFilterActions;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxFilterState.ts

@@ -1,71 +0,0 @@
-import { useMemo } from 'react';
-import { IQuickFiltersConfig } from 'components/QuickFilters/types';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-
-import { deriveCheckboxState } from './checkboxFilterQuery';
-import { isKeyMatch } from './utils';
-
-interface UseCheckboxFilterStateProps {
-	filter: IQuickFiltersConfig;
-	attributeValues: string[];
-	activeQueryIndex: number;
-}
-
-interface UseCheckboxFilterStateReturn {
-	currentFilterState: Record<string, boolean>;
-	isFilterDisabled: boolean;
-	isMultipleValuesTrueForTheKey: boolean;
-}
-
-/**
- * Reads the active query and derives the per-value checked state for this
- * attribute, whether the filter is disabled (same key used more than once in
- * the filter bar), and whether more than one value is currently selected.
- */
-function useCheckboxFilterState({
-	filter,
-	attributeValues,
-	activeQueryIndex,
-}: UseCheckboxFilterStateProps): UseCheckboxFilterStateReturn {
-	const { currentQuery } = useQueryBuilder();
-
-	// derive the state of each filter key here and keep it in sync with current query
-	const currentFilterState = useMemo(
-		() =>
-			deriveCheckboxState({
-				attributeValues,
-				filterItems:
-					currentQuery?.builder.queryData?.[activeQueryIndex]?.filters?.items,
-				filterKey: filter.attributeKey.key,
-			}),
-		[
-			attributeValues,
-			currentQuery?.builder.queryData,
-			filter.attributeKey,
-			activeQueryIndex,
-		],
-	);
-
-	// disable the filter when there are multiple entries of the same attribute key present in the filter bar
-	const isFilterDisabled = useMemo(
-		() =>
-			(currentQuery?.builder?.queryData?.[
-				activeQueryIndex
-			]?.filters?.items?.filter((item) =>
-				isKeyMatch(item.key?.key, filter.attributeKey.key),
-			)?.length || 0) > 1,
-		[currentQuery?.builder?.queryData, activeQueryIndex, filter.attributeKey],
-	);
-
-	// whether the current filter has multiple values to its name in the key op value section
-	const isMultipleValuesTrueForTheKey =
-		Object.values(currentFilterState).filter((val) => val).length > 1;
-
-	return {
-		currentFilterState,
-		isFilterDisabled,
-		isMultipleValuesTrueForTheKey,
-	};
-}
-
-export default useCheckboxFilterState;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxFilterValues.tsx

@@ -1,99 +0,0 @@
-import { useMemo } from 'react';
-import {
-	IQuickFiltersConfig,
-	QuickFiltersSource,
-} from 'components/QuickFilters/types';
-import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
-import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
-import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { DataSource } from 'types/common/queryBuilder';
-
-interface UseCheckboxFilterValuesProps {
-	filter: IQuickFiltersConfig;
-	source: QuickFiltersSource;
-	searchText: string;
-	isOpen: boolean;
-}
-
-interface UseCheckboxFilterValuesReturn {
-	attributeValues: string[];
-	isLoading: boolean;
-}
-
-function useCheckboxFilterValues({
-	filter,
-	source,
-	searchText,
-	isOpen,
-}: UseCheckboxFilterValuesProps): UseCheckboxFilterValuesReturn {
-	const { data, isLoading } = useGetAggregateValues(
-		{
-			aggregateOperator: filter.aggregateOperator || 'noop',
-			dataSource: filter.dataSource || DataSource.LOGS,
-			aggregateAttribute: filter.aggregateAttribute || '',
-			attributeKey: filter.attributeKey.key,
-			filterAttributeKeyDataType: filter.attributeKey.dataType || DataTypes.EMPTY,
-			tagType: filter.attributeKey.type || '',
-			searchText: searchText ?? '',
-		},
-		{
-			enabled: isOpen && source !== QuickFiltersSource.METER_EXPLORER,
-			keepPreviousData: true,
-		},
-	);
-
-	const { data: keyValueSuggestions, isLoading: isLoadingKeyValueSuggestions } =
-		useGetQueryKeyValueSuggestions({
-			key: filter.attributeKey.key,
-			signal: filter.dataSource || DataSource.LOGS,
-			signalSource: 'meter',
-			options: {
-				enabled: isOpen && source === QuickFiltersSource.METER_EXPLORER,
-				keepPreviousData: true,
-			},
-		});
-
-	const attributeValues: string[] = useMemo(() => {
-		const dataType = filter.attributeKey.dataType || DataTypes.String;
-
-		if (source === QuickFiltersSource.METER_EXPLORER && keyValueSuggestions) {
-			// Process the response data
-			const responseData = keyValueSuggestions?.data as any;
-			const values = responseData.data?.values || {};
-			const stringValues = values.stringValues || [];
-			const numberValues = values.numberValues || [];
-
-			// Generate options from string values - explicitly handle empty strings
-			const stringOptions = stringValues
-				// Strict filtering for empty string - we'll handle it as a special case if needed
-				.filter(
-					(value: string | null | undefined): value is string =>
-						value !== null && value !== undefined && value !== '',
-				);
-
-			// Generate options from number values
-			const numberOptions = numberValues
-				.filter(
-					(value: number | null | undefined): value is number =>
-						value !== null && value !== undefined,
-				)
-				.map((value: number) => value.toString());
-
-			// Combine all options and make sure we don't have duplicate labels
-			return [...stringOptions, ...numberOptions];
-		}
-
-		const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
-		return (data?.payload?.[key] || []).filter(
-			(val) => val !== undefined && val !== null,
-		);
-	}, [data?.payload, filter.attributeKey.dataType, keyValueSuggestions, source]);
-
-	return {
-		attributeValues,
-		isLoading: isLoading || isLoadingKeyValueSuggestions,
-	};
-}
-
-export default useCheckboxFilterValues;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters.ts

@@ -1,5 +1,5 @@
 import {
-	DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind as TextEnvelopeKind,
+	DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpecDTOKind as TextEnvelopeKind,
 	DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind as ListEnvelopeKind,
 	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesCustomVariableSpecDTOKind as CustomPluginKind,
 	DashboardtypesVariablePluginVariantGithubComSigNozSignozPkgTypesDashboardtypesDynamicVariableSpecDTOKind as DynamicPluginKind,
@@ -10,7 +10,7 @@ import type {
 	DashboardtypesListVariableSpecDTO,
 	DashboardtypesVariableDTO,
 	DashboardtypesVariablePluginDTO,
-	DashboardTextVariableSpecDTO,
+	DashboardtypesTextVariableSpecDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
 import {
@@ -35,7 +35,7 @@ export function dtoToFormModel(
 
 	// Text variable — a distinct envelope (no list plugin).
 	if (dto.kind === TextEnvelopeKind.TextVariable) {
-		const spec = dto.spec as DashboardTextVariableSpecDTO;
+		const spec = dto.spec as DashboardtypesTextVariableSpecDTO;
 		return {
 			...common,
 			type: 'TEXT',

pkg/types/dashboardtypes/perses_dashboard_convertors_test.go

@@ -38,7 +38,7 @@ func newTestDashboardV2(t *testing.T, orgID valuer.UUID, source Source) *Dashboa
 								FillMode:          FillModeSolid,
 								SpanGaps:          SpanGaps{FillLessThan: valuer.MustParseTextDuration("60s")},
 							},
-							Legend: Legend{Position: LegendPositionBottom},
+							Legend: Legend{Position: LegendPositionBottom, Mode: LegendModeList},
 						},
 					},
 					Queries: []Query{

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -48,7 +48,42 @@ func (d *DashboardSpec) UnmarshalJSON(data []byte) error {
 // ══════════════════════════════════════════════
 
 func (d *DashboardSpec) Validate() error {
+	if err := d.validateVariables(); err != nil {
+		return err
+	}
+	if err := d.validatePanels(); err != nil {
+		return err
+	}
+	return d.validateLayouts()
+}
+
+// validateVariables rejects two variables sharing the same name.
+func (d *DashboardSpec) validateVariables() error {
+	seen := make(map[string]struct{}, len(d.Variables))
+	for i, v := range d.Variables {
+		var name string
+		switch s := v.Spec.(type) {
+		case *ListVariableSpec:
+			name = s.Name
+		case *TextVariableSpec:
+			name = s.Name
+		default:
+			// Unreachable via UnmarshalJSON; reaching here means a Go caller broke the Kind/Spec pairing.
+			return errors.NewInternalf(errors.CodeInternal, "spec.variables[%d].spec: unexpected variable spec type %T", i, v.Spec)
+		}
+		if _, dup := seen[name]; dup {
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.variables[%d]: duplicate variable name %q", i, name)
+		}
+		seen[name] = struct{}{}
+	}
+	return nil
+}
+
+func (d *DashboardSpec) validatePanels() error {
 	for key, panel := range d.Panels {
+		if err := common.ValidateID(key); err != nil {
+			return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "spec.panels: %s", err.Error())
+		}
 		if panel == nil {
 			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.panels.%s: panel must not be null", key)
 		}
@@ -69,6 +104,13 @@ func (d *DashboardSpec) Validate() error {
 }
 
 func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind, panelKind PanelPluginKind, path string) error {
+	compositeSubQueryTypeToPluginKind := map[qb.QueryType]QueryPluginKind{
+		qb.QueryTypeBuilder:       QueryKindBuilder,
+		qb.QueryTypeFormula:       QueryKindFormula,
+		qb.QueryTypeTraceOperator: QueryKindTraceOperator,
+		qb.QueryTypePromQL:        QueryKindPromQL,
+		qb.QueryTypeClickHouseSQL: QueryKindClickHouseSQL,
+	}
 	if !slices.Contains(allowed, plugin.Kind) {
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
 			"%s: query kind %q is not supported by panel kind %q", path, plugin.Kind, panelKind)
@@ -96,12 +138,35 @@ func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind,
 	return nil
 }
 
-var (
-	compositeSubQueryTypeToPluginKind = map[qb.QueryType]QueryPluginKind{
-		qb.QueryTypeBuilder:       QueryKindBuilder,
-		qb.QueryTypeFormula:       QueryKindFormula,
-		qb.QueryTypeTraceOperator: QueryKindTraceOperator,
-		qb.QueryTypePromQL:        QueryKindPromQL,
-		qb.QueryTypeClickHouseSQL: QueryKindClickHouseSQL,
+// validateLayouts rejects grid items referencing a panel that doesn't exist.
+func (d *DashboardSpec) validateLayouts() error {
+	for li, layout := range d.Layouts {
+		grid, ok := layout.Spec.(*dashboard.GridLayoutSpec)
+		if !ok {
+			// Unreachable via UnmarshalJSON; reaching here means a Go caller broke the Kind/Spec pairing.
+			return errors.NewInternalf(errors.CodeInternal, "spec.layouts[%d].spec: unexpected layout spec type %T", li, layout.Spec)
+		}
+		for ii, item := range grid.Items {
+			path := fmt.Sprintf("spec.layouts[%d].spec.items[%d].content", li, ii)
+			if item.Content == nil {
+				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: content reference is required", path)
+			}
+			key, err := panelKeyFromRef(item.Content.Path, item.Content.Ref, path)
+			if err != nil {
+				return err
+			}
+			if _, ok := d.Panels[key]; !ok {
+				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: references unknown panel %q", path, key)
+			}
+		}
 	}
-)
+	return nil
+}
+
+// panelKeyFromRef extracts <key> from a "#/spec/panels/<key>" content ref.
+func panelKeyFromRef(refPath []string, ref string, path string) (string, error) {
+	if len(refPath) != 3 || refPath[0] != "spec" || refPath[1] != "panels" {
+		return "", errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: %q must reference a panel as \"#/spec/panels/<key>\"", path, ref)
+	}
+	return refPath[2], nil
+}

pkg/types/dashboardtypes/perses_dashboard_patch.go

@@ -73,7 +73,7 @@ func (p PatchableDashboardV2) Apply(existing *DashboardV2) (*UpdatableDashboardV
 	}
 	patched, err := p.patch.ApplyWithOptions(raw, &jsonpatch.ApplyOptions{AllowMissingPathOnRemove: true, EnsurePathExistsOnAdd: true})
 	if err != nil {
-		return nil, errors.Wrap(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "JSON Patch could not be applied to the target dashboard")
+		return nil, errors.Wrap(err, errors.TypeInvalidInput, ErrCodeDashboardInvalidPatch, "JSON Patch could not be applied to the target dashboard").WithAdditional(err.Error())
 	}
 	out := &UpdatableDashboardV2{}
 	if err := json.Unmarshal(patched, out); err != nil {

pkg/types/dashboardtypes/perses_dashboard_patch_test.go

@@ -405,6 +405,7 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 		out, err := decode(t, `[
 			{"op": "replace", "path": "/spec/display/name", "value": "Multi-step"},
 			{"op": "remove",  "path": "/spec/panels/p2"},
+			{"op": "remove",  "path": "/spec/layouts/0/spec/items/1"},
 			{"op": "add",     "path": "/tags/-", "value": {"key": "env", "value": "staging"}}
 		]`).Apply(base)
 		require.NoError(t, err)

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -112,6 +112,162 @@ func TestValidateOnlyVariables(t *testing.T) {
 	require.NoError(t, err, "expected valid")
 }
 
+func TestInvalidateDuplicateVariableNames(t *testing.T) {
+	data := []byte(`{
+		"variables": [
+			{
+				"kind": "TextVariable",
+				"spec": {"name": "env", "value": "prod"}
+			},
+			{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "env",
+					"allowAllValue": false,
+					"allowMultiple": false,
+					"plugin": {
+						"kind": "signoz/DynamicVariable",
+						"spec": {"name": "service.name", "signal": "metrics"}
+					}
+				}
+			}
+		],
+		"layouts": []
+	}`)
+	_, err := unmarshalDashboard(data)
+	require.Error(t, err, "expected error for duplicate variable name")
+	require.Contains(t, err.Error(), `duplicate variable name "env"`)
+}
+
+func TestInvalidateVariableNameWithInvalidChars(t *testing.T) {
+	listVarWithName := func(name string) []byte {
+		return []byte(`{
+			"variables": [
+				{
+					"kind": "ListVariable",
+					"spec": {
+						"name": "` + name + `",
+						"allowAllValue": false,
+						"allowMultiple": false,
+						"plugin": {
+							"kind": "signoz/DynamicVariable",
+							"spec": {"name": "service.name", "signal": "metrics"}
+						}
+					}
+				}
+			],
+			"layouts": []
+		}`)
+	}
+	for _, name := range []string{"my var", "cost$", "bad!", "a/b"} {
+		t.Run(name, func(t *testing.T) {
+			_, err := unmarshalDashboard(listVarWithName(name))
+			require.Error(t, err, "expected error for invalid variable name %q", name)
+			require.Contains(t, err.Error(), "is not a correct name")
+		})
+	}
+	for _, name := range []string{"service", "my_var", "MY_VAR", "MixedCase9", "with-hyphen", "with.dot"} {
+		t.Run(name, func(t *testing.T) {
+			_, err := unmarshalDashboard(listVarWithName(name))
+			require.NoError(t, err, "expected valid variable name %q", name)
+		})
+	}
+	t.Run("digits only", func(t *testing.T) {
+		_, err := unmarshalDashboard(listVarWithName("123"))
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "cannot contain only digits")
+	})
+}
+
+func TestInvalidatePanelKey(t *testing.T) {
+	data := []byte(`{
+		"panels": {
+			"bad key!": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/TablePanel", "spec": {}},
+					"queries": [{
+						"kind": "time_series",
+						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+							"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]
+						}}}
+					}]
+				}
+			}
+		},
+		"layouts": []
+	}`)
+	_, err := unmarshalDashboard(data)
+	require.Error(t, err, "expected error for invalid panel key")
+	require.Contains(t, err.Error(), "is not a correct name")
+}
+
+func TestInvalidateListVariableCrossFields(t *testing.T) {
+	listVar := func(specFields string) []byte {
+		return []byte(`{
+			"variables": [
+				{
+					"kind": "ListVariable",
+					"spec": {
+						"name": "service",
+						` + specFields + `
+						"plugin": {
+							"kind": "signoz/DynamicVariable",
+							"spec": {"name": "service.name", "signal": "metrics"}
+						}
+					}
+				}
+			],
+			"layouts": []
+		}`)
+	}
+
+	t.Run("customAllValue without allowAllValue", func(t *testing.T) {
+		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "customAllValue": "*",`))
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "customAllValue cannot be set")
+	})
+
+	t.Run("list defaultValue without allowMultiple", func(t *testing.T) {
+		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "defaultValue": ["a", "b"],`))
+		require.Error(t, err)
+		require.Contains(t, err.Error(), "allowMultiple")
+	})
+
+	t.Run("single-element list default coerces when allowMultiple false", func(t *testing.T) {
+		_, err := unmarshalDashboard(listVar(`"allowAllValue": false, "allowMultiple": false, "defaultValue": ["only"],`))
+		require.NoError(t, err, "single-element list default should be coerced, not rejected")
+	})
+}
+
+func TestInvalidateEmptyVariableName(t *testing.T) {
+	cases := map[string][]byte{
+		"text variable": []byte(`{
+			"variables": [{"kind": "TextVariable", "spec": {"name": "", "value": "x"}}],
+			"layouts": []
+		}`),
+		"list variable": []byte(`{
+			"variables": [{
+				"kind": "ListVariable",
+				"spec": {
+					"name": "",
+					"allowAllValue": false,
+					"allowMultiple": false,
+					"plugin": {"kind": "signoz/DynamicVariable", "spec": {"name": "service.name", "signal": "metrics"}}
+				}
+			}],
+			"layouts": []
+		}`),
+	}
+	for name, data := range cases {
+		t.Run(name, func(t *testing.T) {
+			_, err := unmarshalDashboard(data)
+			require.Error(t, err, "expected error for empty variable name")
+			require.Contains(t, err.Error(), "name cannot be empty")
+		})
+	}
+}
+
 func TestInvalidateUnknownPluginKind(t *testing.T) {
 	tests := []struct {
 		name        string
@@ -270,6 +426,65 @@ func TestInvalidateOneInvalidPanel(t *testing.T) {
 	require.Contains(t, err.Error(), "FakePanel", "error should mention FakePanel")
 }
 
+func TestInvalidateLayoutPanelReferences(t *testing.T) {
+	validPanels := `"panels": {
+		"p1": {
+			"kind": "Panel",
+			"spec": {
+				"plugin": {"kind": "signoz/TablePanel", "spec": {}},
+				"queries": [{
+					"kind": "time_series",
+					"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+						"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]
+					}}}
+				}]
+			}
+		}
+	}`
+	layout := func(items string) []byte {
+		return []byte(`{` + validPanels + `, "layouts": [{"kind": "Grid", "spec": {"items": [` + items + `]}}]}`)
+	}
+
+	tests := []struct {
+		name        string
+		data        []byte
+		wantContain string
+	}{
+		{
+			name:        "reference to unknown panel",
+			data:        layout(`{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/ghost"}}`),
+			wantContain: `references unknown panel "ghost"`,
+		},
+		{
+			name:        "reference not pointing at a panel",
+			data:        layout(`{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/variables/p1"}}`),
+			wantContain: "must reference a panel",
+		},
+		{
+			name:        "reference missing spec prefix",
+			data:        layout(`{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/panels/p1"}}`),
+			wantContain: "must reference a panel",
+		},
+		{
+			name:        "valid reference",
+			data:        layout(`{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}`),
+			wantContain: "",
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			_, err := unmarshalDashboard(tt.data)
+			if tt.wantContain == "" {
+				require.NoError(t, err)
+				return
+			}
+			require.Error(t, err)
+			require.Contains(t, err.Error(), tt.wantContain)
+		})
+	}
+}
+
 func TestRejectUnknownFieldsInPluginSpec(t *testing.T) {
 	tests := []struct {
 		name        string
@@ -569,6 +784,24 @@ func TestInvalidateBadPanelSpecValues(t *testing.T) {
 			}`,
 			wantContain: "legend position",
 		},
+		{
+			name: "bad legend mode",
+			data: `{
+				"panels": {
+					"p1": {
+						"kind": "Panel",
+						"spec": {
+							"plugin": {
+								"kind": "signoz/BarChartPanel",
+								"spec": {"legend": {"mode": "grid"}}
+							}
+						}
+					}
+				},
+				"layouts": []
+			}`,
+			wantContain: "legend mode",
+		},
 		{
 			name: "bad threshold format",
 			data: `{
@@ -634,6 +867,39 @@ func TestInvalidateBadPanelSpecValues(t *testing.T) {
 	}
 }
 
+// Label on ThresholdWithLabel is optional — the backend never reads it, so a
+// threshold with an omitted or empty label must validate cleanly.
+func TestThresholdLabelOptional(t *testing.T) {
+	for _, tt := range []struct {
+		name      string
+		threshold string
+	}{
+		{name: "label omitted", threshold: `{"value": 100, "color": "Red"}`},
+		{name: "label empty", threshold: `{"value": 100, "color": "Red", "label": ""}`},
+	} {
+		t.Run(tt.name, func(t *testing.T) {
+			data := []byte(`{
+				"panels": {
+					"p1": {
+						"kind": "Panel",
+						"spec": {
+							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {"thresholds": [` + tt.threshold + `]}},
+							"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+						}
+					}
+				},
+				"layouts": []
+			}`)
+			d, err := unmarshalDashboard(data)
+			require.NoError(t, err, "threshold without a label should validate")
+
+			spec := d.Panels["p1"].Spec.Plugin.Spec.(*TimeSeriesPanelSpec)
+			require.Len(t, spec.Thresholds, 1)
+			require.Empty(t, spec.Thresholds[0].Label, "label should remain empty")
+		})
+	}
+}
+
 func TestInvalidatePanelWithoutQueries(t *testing.T) {
 	data := []byte(`{
 		"panels": {
@@ -749,11 +1015,6 @@ func TestValidateRequiredFields(t *testing.T) {
 			data:        wrapPanel("signoz/TimeSeriesPanel", `{"thresholds": [{"value": 100, "label": "high", "color": ""}]}`),
 			wantContain: "Color",
 		},
-		{
-			name:        "ThresholdWithLabel missing label",
-			data:        wrapPanel("signoz/TimeSeriesPanel", `{"thresholds": [{"value": 100, "color": "Red", "label": ""}]}`),
-			wantContain: "Label",
-		},
 		{
 			name:        "ComparisonThreshold missing value",
 			data:        wrapPanel("signoz/NumberPanel", `{"thresholds": [{"operator": "above", "format": "text", "color": "Red"}]}`),
@@ -811,10 +1072,11 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 	require.Equal(t, "2", spec.Formatting.DecimalPrecision.ValueOrDefault(), "expected DecimalPrecision default 2")
 	require.Equal(t, "spline", spec.ChartAppearance.LineInterpolation.ValueOrDefault(), "expected LineInterpolation default spline")
 	require.Equal(t, "solid", spec.ChartAppearance.LineStyle.ValueOrDefault(), "expected LineStyle default solid")
-	require.Equal(t, "solid", spec.ChartAppearance.FillMode.ValueOrDefault(), "expected FillMode default solid")
+	require.Equal(t, "none", spec.ChartAppearance.FillMode.ValueOrDefault(), "expected FillMode default none")
 	require.False(t, spec.ChartAppearance.SpanGaps.FillOnlyBelow, "expected SpanGaps.FillOnlyBelow default false")
 	require.Equal(t, "global_time", spec.Visualization.TimePreference.ValueOrDefault(), "expected TimePreference default global_time")
 	require.Equal(t, "bottom", spec.Legend.Position.ValueOrDefault(), "expected LegendPosition default bottom")
+	require.Equal(t, "list", spec.Legend.Mode.ValueOrDefault(), "expected LegendMode default list")
 
 	// Re-marshal the full dashboard (what we'd store in DB / return in API response)
 	// and verify the output contains the default values.
@@ -825,9 +1087,10 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 		"decimalPrecision":  `"2"`,
 		"lineInterpolation": `"spline"`,
 		"lineStyle":         `"solid"`,
-		"fillMode":          `"solid"`,
+		"fillMode":          `"none"`,
 		"timePreference":    `"global_time"`,
 		"position":          `"bottom"`,
+		"mode":              `"list"`,
 	} {
 		assert.Contains(t, outputStr, `"`+field+`":`+want, "expected stored/response JSON to contain %s:%s", field, want)
 	}
@@ -930,7 +1193,7 @@ func TestStorageRoundTrip(t *testing.T) {
 	assert.Equal(t, "2", tsSpec.Formatting.DecimalPrecision.ValueOrDefault())
 	assert.Equal(t, "spline", tsSpec.ChartAppearance.LineInterpolation.ValueOrDefault())
 	assert.Equal(t, "solid", tsSpec.ChartAppearance.LineStyle.ValueOrDefault())
-	assert.Equal(t, "solid", tsSpec.ChartAppearance.FillMode.ValueOrDefault())
+	assert.Equal(t, "none", tsSpec.ChartAppearance.FillMode.ValueOrDefault())
 	assert.Equal(t, "global_time", tsSpec.Visualization.TimePreference.ValueOrDefault())
 	assert.Equal(t, "bottom", tsSpec.Legend.Position.ValueOrDefault())
 	numSpec := d.Panels["p2"].Spec.Plugin.Spec.(*NumberPanelSpec)
@@ -950,7 +1213,7 @@ func TestStorageRoundTrip(t *testing.T) {
 	assert.Equal(t, "2", tsLoaded.Formatting.DecimalPrecision.ValueOrDefault(), "after load")
 	assert.Equal(t, "spline", tsLoaded.ChartAppearance.LineInterpolation.ValueOrDefault(), "after load")
 	assert.Equal(t, "solid", tsLoaded.ChartAppearance.LineStyle.ValueOrDefault(), "after load")
-	assert.Equal(t, "solid", tsLoaded.ChartAppearance.FillMode.ValueOrDefault(), "after load")
+	assert.Equal(t, "none", tsLoaded.ChartAppearance.FillMode.ValueOrDefault(), "after load")
 	assert.Equal(t, "global_time", tsLoaded.Visualization.TimePreference.ValueOrDefault(), "after load")
 	assert.Equal(t, "bottom", tsLoaded.Legend.Position.ValueOrDefault(), "after load")
 	numLoaded := loaded.Panels["p2"].Spec.Plugin.Spec.(*NumberPanelSpec)
@@ -966,7 +1229,7 @@ func TestStorageRoundTrip(t *testing.T) {
 		"decimalPrecision":  `"2"`,
 		"lineInterpolation": `"spline"`,
 		"lineStyle":         `"solid"`,
-		"fillMode":          `"solid"`,
+		"fillMode":          `"none"`,
 		"timePreference":    `"global_time"`,
 		"position":          `"bottom"`,
 		"format":            `"text"`,

pkg/types/dashboardtypes/perses_drift_test.go

@@ -30,6 +30,7 @@ func TestDashboardSpecMatchesPerses(t *testing.T) {
 		{"DatasourceSpec", typeOf[DatasourceSpec](), typeOf[datasource.Spec]()},
 		{"Variable", typeOf[Variable](), typeOf[dashboard.Variable]()},
 		{"ListVariableSpec", typeOf[ListVariableSpec](), typeOf[dashboard.ListVariableSpec]()},
+		{"TextVariableSpec", typeOf[TextVariableSpec](), typeOf[dashboard.TextVariableSpec]()},
 		{"Layout", typeOf[Layout](), typeOf[dashboard.Layout]()},
 	}
 

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -51,7 +51,7 @@ func (p *PanelPlugin) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	p.Kind = PanelPluginKind(kind)
-	p.Spec = spec
+	p.Spec = *spec
 	return nil
 }
 
@@ -110,7 +110,7 @@ func (p *QueryPlugin) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	p.Kind = QueryPluginKind(kind)
-	p.Spec = spec
+	p.Spec = *spec
 	return nil
 }
 
@@ -165,7 +165,7 @@ func (p *VariablePlugin) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	p.Kind = VariablePluginKind(kind)
-	p.Spec = spec
+	p.Spec = *spec
 	return nil
 }
 
@@ -215,7 +215,7 @@ func (p *DatasourcePlugin) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	p.Kind = DatasourcePluginKind(kind)
-	p.Spec = spec
+	p.Spec = *spec
 	return nil
 }
 
@@ -297,8 +297,7 @@ func extractKindAndSpec(data []byte) (string, []byte, error) {
 	return head.Kind, head.Spec, nil
 }
 
-// decodeSpec strict-decodes a spec JSON into target and runs struct-tag validation (go-playground/validator).
-func decodeSpec(specJSON []byte, target any, kind string) (any, error) {
+func decodeSpec[T any](specJSON []byte, target T, kind string) (*T, error) {
 	if len(specJSON) == 0 {
 		return nil, errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "kind %q: spec is required", kind)
 	}
@@ -310,7 +309,12 @@ func decodeSpec(specJSON []byte, target any, kind string) (any, error) {
 	if err := validator.New().Struct(target); err != nil {
 		return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "kind %q: spec failed validation", kind)
 	}
-	return target, nil
+	if v, ok := any(target).(interface{ validate() error }); ok {
+		if err := v.validate(); err != nil {
+			return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "kind %q: %s", kind, err.Error())
+		}
+	}
+	return &target, nil
 }
 
 // signozDiscriminatorKey is the extension key that signoz.attachDiscriminators

pkg/types/dashboardtypes/perses_replicas.go

@@ -4,6 +4,7 @@ import (
 	"encoding/json"
 	"maps"
 	"slices"
+	"strconv"
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
@@ -84,7 +85,7 @@ type QuerySpec struct {
 // ══════════════════════════════════════════════
 
 // Variable is the list/text sum type. Spec is set to *ListVariableSpec or
-// *dashboard.TextVariableSpec by UnmarshalJSON based on Kind. The schema is a
+// *TextVariableSpec by UnmarshalJSON based on Kind. The schema is a
 // discriminated oneOf (see JSONSchemaOneOf).
 type Variable struct {
 	Kind variable.Kind `json:"kind" required:"true"`
@@ -94,7 +95,7 @@ type Variable struct {
 func (Variable) PrepareJSONSchema(s *jsonschema.Schema) error {
 	return markDiscriminator(s, "kind", map[string]string{
 		string(variable.KindList): schemaRef("DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec"),
-		string(variable.KindText): schemaRef("DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec"),
+		string(variable.KindText): schemaRef("DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesTextVariableSpec"),
 	})
 }
 
@@ -110,14 +111,14 @@ func (v *Variable) UnmarshalJSON(data []byte) error {
 			return err
 		}
 		v.Kind = variable.KindList
-		v.Spec = spec
+		v.Spec = *spec
 	case string(variable.KindText):
-		spec, err := decodeSpec(specJSON, new(dashboard.TextVariableSpec), kind)
+		spec, err := decodeSpec(specJSON, new(TextVariableSpec), kind)
 		if err != nil {
 			return err
 		}
 		v.Kind = variable.KindText
-		v.Spec = spec
+		v.Spec = *spec
 	default:
 		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown variable kind %q; allowed values: %s", kind, allowedValuesForKind([]variable.Kind{variable.KindList, variable.KindText}))
 	}
@@ -127,7 +128,7 @@ func (v *Variable) UnmarshalJSON(data []byte) error {
 func (Variable) JSONSchemaOneOf() []any {
 	return []any{
 		VariableEnvelope[ListVariableSpec]{Kind: string(variable.KindList)},
-		VariableEnvelope[dashboard.TextVariableSpec]{Kind: string(variable.KindText)},
+		VariableEnvelope[TextVariableSpec]{Kind: string(variable.KindText)},
 	}
 }
 
@@ -143,7 +144,7 @@ func (v VariableEnvelope[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
 // ListVariableSpec mirrors dashboard.ListVariableSpec (variable.ListSpec
 // fields + Name) but with a typed VariablePlugin replacing common.Plugin.
 type ListVariableSpec struct {
-	Display         Display                `json:"display" required:"true"`
+	Display         *Display               `json:"display,omitempty"`
 	DefaultValue    *variable.DefaultValue `json:"defaultValue,omitempty"`
 	AllowAllValue   bool                   `json:"allowAllValue"`
 	AllowMultiple   bool                   `json:"allowMultiple"`
@@ -151,7 +152,53 @@ type ListVariableSpec struct {
 	CapturingRegexp string                 `json:"capturingRegexp,omitempty"`
 	Sort            *variable.Sort         `json:"sort,omitempty"`
 	Plugin          VariablePlugin         `json:"plugin"`
-	Name            string                 `json:"name"`
+	Name            string                 `json:"name" required:"true" minLength:"1"`
+}
+
+// validate mirrors perses ListVariableSpec validation (plus the digits-only name
+// check perses only applies to text variables); run by decodeSpec on unmarshal.
+func (s *ListVariableSpec) validate() error {
+	if err := common.ValidateID(s.Name); err != nil {
+		return err
+	}
+	if _, err := strconv.Atoi(s.Name); err == nil {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "variable name cannot contain only digits")
+	}
+	if s.CustomAllValue != "" && !s.AllowAllValue {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "customAllValue cannot be set if allowAllValue is not set to true")
+	}
+	if s.DefaultValue != nil && len(s.DefaultValue.SliceValues) > 0 && !s.AllowMultiple {
+		if len(s.DefaultValue.SliceValues) == 1 {
+			s.DefaultValue.SingleValue = s.DefaultValue.SliceValues[0]
+			s.DefaultValue.SliceValues = nil
+			return nil
+		}
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "defaultValue cannot be a list if allowMultiple is not set to true")
+	}
+	return nil
+}
+
+// TextVariableSpec replicates dashboard.TextVariableSpec so name can carry the
+// required/non-empty schema tags perses leaves off.
+type TextVariableSpec struct {
+	Display  *Display `json:"display,omitempty"`
+	Value    string   `json:"value"`
+	Constant bool     `json:"constant,omitempty"`
+	Name     string   `json:"name" required:"true" minLength:"1"`
+}
+
+// validate mirrors perses TextVariableSpec validation; run by decodeSpec on unmarshal.
+func (s *TextVariableSpec) validate() error {
+	if err := common.ValidateID(s.Name); err != nil {
+		return err
+	}
+	if _, err := strconv.Atoi(s.Name); err == nil {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "variable name cannot contain only digits")
+	}
+	if s.Value == "" && s.Constant {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "value for a constant text variable cannot be empty")
+	}
+	return nil
 }
 
 // ══════════════════════════════════════════════
@@ -194,7 +241,7 @@ func (l *Layout) UnmarshalJSON(data []byte) error {
 		return err
 	}
 	l.Kind = dashboard.LayoutKind(kind)
-	l.Spec = spec
+	l.Spec = *spec
 	return nil
 }
 

pkg/types/dashboardtypes/perses_signoz_plugins.go

@@ -241,6 +241,7 @@ type TableFormatting struct {
 
 type Legend struct {
 	Position     LegendPosition    `json:"position"`
+	Mode         LegendMode        `json:"mode"`
 	CustomColors map[string]string `json:"customColors"`
 }
 
@@ -248,7 +249,7 @@ type ThresholdWithLabel struct {
 	Value float64 `json:"value" validate:"required" required:"true"`
 	Unit  string  `json:"unit"`
 	Color string  `json:"color" validate:"required" required:"true"`
-	Label string  `json:"label" validate:"required" required:"true"`
+	Label string  `json:"label"`
 }
 
 type ComparisonThreshold struct {
@@ -358,6 +359,47 @@ func (l *LegendPosition) UnmarshalJSON(data []byte) error {
 	}
 }
 
+type LegendMode struct{ valuer.String }
+
+var (
+	LegendModeList  = LegendMode{valuer.NewString("list")} // default
+	LegendModeTable = LegendMode{valuer.NewString("table")}
+)
+
+func (LegendMode) Enum() []any {
+	return []any{LegendModeList, LegendModeTable}
+}
+
+func (m LegendMode) ValueOrDefault() string {
+	if m.IsZero() {
+		return LegendModeList.StringValue()
+	}
+	return m.StringValue()
+}
+
+func (m LegendMode) MarshalJSON() ([]byte, error) {
+	return json.Marshal(m.ValueOrDefault())
+}
+
+func (m *LegendMode) UnmarshalJSON(data []byte) error {
+	var v string
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid legend mode: must be a string, one of `list` or `table`")
+	}
+	if v == "" {
+		*m = LegendModeList
+		return nil
+	}
+	lm := LegendMode{valuer.NewString(v)}
+	switch lm {
+	case LegendModeList, LegendModeTable:
+		*m = lm
+		return nil
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid legend mode %q: must be `list` or `table`", v)
+	}
+}
+
 type ThresholdFormat struct{ valuer.String }
 
 var (
@@ -534,9 +576,9 @@ func (ls *LineStyle) UnmarshalJSON(data []byte) error {
 type FillMode struct{ valuer.String }
 
 var (
-	FillModeSolid    = FillMode{valuer.NewString("solid")} // default
+	FillModeSolid    = FillMode{valuer.NewString("solid")}
 	FillModeGradient = FillMode{valuer.NewString("gradient")}
-	FillModeNone     = FillMode{valuer.NewString("none")}
+	FillModeNone     = FillMode{valuer.NewString("none")} // default
 )
 
 func (FillMode) Enum() []any {
@@ -545,7 +587,7 @@ func (FillMode) Enum() []any {
 
 func (fm FillMode) ValueOrDefault() string {
 	if fm.IsZero() {
-		return FillModeSolid.StringValue()
+		return FillModeNone.StringValue()
 	}
 	return fm.StringValue()
 }
@@ -560,7 +602,7 @@ func (fm *FillMode) UnmarshalJSON(data []byte) error {
 		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid fill mode: must be a string, one of `solid`, `gradient`, or `none`")
 	}
 	if v == "" {
-		*fm = FillModeSolid
+		*fm = FillModeNone
 		return nil
 	}
 	val := FillMode{valuer.NewString(v)}
@@ -573,12 +615,9 @@ func (fm *FillMode) UnmarshalJSON(data []byte) error {
 	}
 }
 
-// SpanGaps controls whether lines connect across null values.
-// When FillOnlyBelow is false (default), all gaps are connected.
-// When FillOnlyBelow is true, only gaps smaller than FillLessThan are connected.
 type SpanGaps struct {
-	FillOnlyBelow bool                `json:"fillOnlyBelow"`
-	FillLessThan  valuer.TextDuration `json:"fillLessThan"`
+	FillOnlyBelow bool                `json:"fillOnlyBelow" description:"Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected."`
+	FillLessThan  valuer.TextDuration `json:"fillLessThan" description:"The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected."`
 }
 
 type PrecisionOption struct{ valuer.String }