refactor(query-builder): type the panel-type field map and move it to its own module

Field lists are now `keyof IBuilderQuery`, so a misspelled field fails the
type check. The map and its composition rules live in
`panelTypeDataSourceFormValuesMap.ts`; `panelQuery.ts` keeps the panel-type
switch and the dirty check.

frontend/src/lib/query/__tests__/panelTypeDataSourceFormValuesMap.test.ts

@@ -0,0 +1,120 @@
+import {
+	type BuilderField,
+	panelTypeDataSourceFormValuesMap,
+	type PartialPanelTypes,
+} from 'lib/query/panelTypeDataSourceFormValuesMap';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { DataSource } from 'types/common/queryBuilder';
+
+/**
+ * The map is composed from a few shape rules rather than spelled out per panel type
+ * and data source. These specs pin the rules themselves — each one fails only when a
+ * rule changes, which is the moment to stop and decide, rather than whenever any
+ * field moves.
+ *
+ * The composition it replaced was checked cell by cell against the previous literal
+ * table, which is in git history at `main:frontend/src/lib/query/panelQuery.ts`.
+ */
+function fieldsFor(
+	panelType: keyof PartialPanelTypes,
+	dataSource: DataSource,
+): BuilderField[] {
+	return panelTypeDataSourceFormValuesMap[panelType][dataSource].builder
+		.queryData;
+}
+
+/** Fields present in `to` but not in `from`. */
+function added(from: BuilderField[], to: BuilderField[]): BuilderField[] {
+	return to.filter((field) => !from.includes(field)).sort();
+}
+
+/** Panel types built on the aggregating field list. */
+const AGGREGATING_TYPES: (keyof PartialPanelTypes)[] = [
+	PANEL_TYPES.BAR,
+	PANEL_TYPES.HISTOGRAM,
+	PANEL_TYPES.TABLE,
+	PANEL_TYPES.PIE,
+];
+
+/** Panel types that reduce each series to one cell or slice. */
+const SCALAR_TYPES: (keyof PartialPanelTypes)[] = [
+	PANEL_TYPES.TABLE,
+	PANEL_TYPES.PIE,
+];
+
+describe('panelTypeDataSourceFormValuesMap', () => {
+	const seriesLogs = fieldsFor(PANEL_TYPES.TIME_SERIES, DataSource.LOGS);
+	const seriesMetrics = fieldsFor(PANEL_TYPES.TIME_SERIES, DataSource.METRICS);
+
+	it('shares one builder surface between logs and traces', () => {
+		Object.values(panelTypeDataSourceFormValuesMap).forEach((sources) => {
+			expect(sources[DataSource.LOGS].builder.queryData).toStrictEqual(
+				sources[DataSource.TRACES].builder.queryData,
+			);
+		});
+	});
+
+	// The provider pushes onto the list it reads from this map, so two cells backed by
+	// one instance would leak fields into each other.
+	it('gives every cell its own array instance', () => {
+		const arrays = Object.values(panelTypeDataSourceFormValuesMap).flatMap(
+			(sources) =>
+				Object.values(sources).map((source) => source.builder.queryData),
+		);
+
+		expect(new Set(arrays).size).toBe(arrays.length);
+	});
+
+	// One consequence of composing: the aggregating types share a single field list, so
+	// an edit meant for charts reaches table and pie too.
+	it.each(AGGREGATING_TYPES)(
+		'gives %s the same non-metrics fields as a time series',
+		(panelType) => {
+			expect(fieldsFor(panelType, DataSource.LOGS)).toStrictEqual(seriesLogs);
+		},
+	);
+
+	it('adds both metrics aggregation steps for metrics', () => {
+		expect(added(seriesLogs, seriesMetrics)).toStrictEqual([
+			'spaceAggregation',
+			'timeAggregation',
+		]);
+	});
+
+	it.each(SCALAR_TYPES)('offers reduceTo to %s on metrics only', (panelType) => {
+		expect(
+			added(seriesMetrics, fieldsFor(panelType, DataSource.METRICS)),
+		).toStrictEqual(['reduceTo']);
+		expect(fieldsFor(panelType, DataSource.LOGS)).not.toContain('reduceTo');
+	});
+
+	it('drops grouping, paging and ordering for a single value', () => {
+		const value = fieldsFor(PANEL_TYPES.VALUE, DataSource.LOGS);
+
+		expect(added(value, seriesLogs)).toStrictEqual([
+			'groupBy',
+			'limit',
+			'orderBy',
+		]);
+		expect(value).toContain('reduceTo');
+	});
+
+	it('offers no aggregation fields to raw rows', () => {
+		const rows = fieldsFor(PANEL_TYPES.LIST, DataSource.LOGS);
+
+		expect(rows).not.toContain('aggregateAttribute');
+		expect(rows).not.toContain('aggregateOperator');
+		expect(rows).not.toContain('groupBy');
+		expect(rows).not.toContain('having');
+		expect(rows).not.toContain('stepInterval');
+	});
+
+	it('drops paging and ordering for metrics rows', () => {
+		expect(
+			added(
+				fieldsFor(PANEL_TYPES.LIST, DataSource.METRICS),
+				fieldsFor(PANEL_TYPES.LIST, DataSource.LOGS),
+			),
+		).toStrictEqual(['functions', 'limit', 'orderBy']);
+	});
+});

frontend/src/lib/query/panelQuery.ts

@@ -1,7 +1,7 @@
 /**
  * Panel query shaping shared by the dashboard panel editor and the query
- * builder: the per-panel-type field allowlist, the panel-type switch, and the
- * dirty-check used to decide whether a panel has unsaved query edits.
+ * builder: the panel-type switch and the dirty-check used to decide whether a
+ * panel has unsaved query edits.
  */
 import {
 	initialQueryBuilderFormValuesMap,
@@ -9,7 +9,11 @@ import {
 } from 'constants/queryBuilder';
 import { cloneDeep, isEqual, set, unset } from 'lodash-es';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
+
+import {
+	panelTypeDataSourceFormValuesMap,
+	PartialPanelTypes,
+} from 'lib/query/panelTypeDataSourceFormValuesMap';
 
 // Asks "would saving the current panel change the persisted widget spec?".
 //
@@ -91,453 +95,6 @@ export const getIsQueryModified = (
 	);
 };
 
-export type PartialPanelTypes = {
-	[PANEL_TYPES.BAR]: 'bar';
-	[PANEL_TYPES.LIST]: 'list';
-	[PANEL_TYPES.TABLE]: 'table';
-	[PANEL_TYPES.TIME_SERIES]: 'graph';
-	[PANEL_TYPES.VALUE]: 'value';
-	[PANEL_TYPES.PIE]: 'pie';
-	[PANEL_TYPES.HISTOGRAM]: 'histogram';
-};
-
-export const panelTypeDataSourceFormValuesMap: Record<
-	keyof PartialPanelTypes,
-	Record<DataSource, any>
-> = {
-	[PANEL_TYPES.BAR]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'legend',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'disabled',
-					'functions',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'legend',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-	},
-	[PANEL_TYPES.TIME_SERIES]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'legend',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'disabled',
-					'functions',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'legend',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-	},
-	[PANEL_TYPES.HISTOGRAM]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'legend',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'disabled',
-					'functions',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'legend',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-	},
-	[PANEL_TYPES.TABLE]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'expression',
-					'legend',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'reduceTo',
-					'limit',
-					'having',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'expression',
-					'disabled',
-					'functions',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'expression',
-					'legend',
-					'aggregations',
-				],
-			},
-		},
-	},
-	[PANEL_TYPES.PIE]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'expression',
-					'legend',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'reduceTo',
-					'limit',
-					'having',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'expression',
-					'disabled',
-					'functions',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'groupBy',
-					'limit',
-					'having',
-					'orderBy',
-					'functions',
-					'stepInterval',
-					'disabled',
-					'queryName',
-					'expression',
-					'legend',
-					'aggregations',
-				],
-			},
-		},
-	},
-	[PANEL_TYPES.LIST]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'queryName',
-					'filters',
-					'filter',
-					'limit',
-					'orderBy',
-					'functions',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: ['queryName', 'filters', 'filter', 'aggregations'],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'queryName',
-					'filters',
-					'filter',
-					'limit',
-					'orderBy',
-					'functions',
-					'aggregations',
-				],
-			},
-		},
-	},
-	[PANEL_TYPES.VALUE]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'reduceTo',
-					'having',
-					'functions',
-					'stepInterval',
-					'queryName',
-					'expression',
-					'disabled',
-					'legend',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'having',
-					'reduceTo',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'expression',
-					'disabled',
-					'functions',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'filters',
-					'filter',
-					'reduceTo',
-					'having',
-					'functions',
-					'stepInterval',
-					'queryName',
-					'expression',
-					'disabled',
-					'legend',
-					'aggregations',
-				],
-			},
-		},
-	},
-};
-
 export function handleQueryChange(
 	newPanelType: keyof PartialPanelTypes,
 	supersetQuery: Query,
@@ -555,7 +112,7 @@ export function handleQueryChange(
 					panelTypeDataSourceFormValuesMap[newPanelType][dataSource].builder
 						.queryData;
 
-				fieldsToSelect.forEach((field: keyof IBuilderQuery) => {
+				fieldsToSelect.forEach((field) => {
 					set(tempQuery, field, supersetQuery.builder.queryData[index][field]);
 				});
 

frontend/src/lib/query/panelTypeDataSourceFormValuesMap.ts

@@ -0,0 +1,127 @@
+/**
+ * Builder fields carried across a panel-type switch, per panel type and data source.
+ *
+ * The 21 combinations reduce to a handful of rules, so they are composed rather than
+ * spelled out: logs and traces carry the same fields in every case, metrics splits its
+ * aggregation in two, and each panel type is one of four query shapes. Order is
+ * irrelevant — `handleQueryChange` copies each field independently.
+ */
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+export type PartialPanelTypes = {
+	[PANEL_TYPES.BAR]: 'bar';
+	[PANEL_TYPES.LIST]: 'list';
+	[PANEL_TYPES.TABLE]: 'table';
+	[PANEL_TYPES.TIME_SERIES]: 'graph';
+	[PANEL_TYPES.VALUE]: 'value';
+	[PANEL_TYPES.PIE]: 'pie';
+	[PANEL_TYPES.HISTOGRAM]: 'histogram';
+};
+
+export type BuilderField = keyof IBuilderQuery;
+
+export type PanelTypeFormValues = {
+	builder: { queryData: BuilderField[] };
+};
+
+/** Every field an aggregating query carries — shared by charts, table and pie. */
+const AGGREGATING_FIELDS: readonly BuilderField[] = [
+	'aggregateAttribute',
+	'aggregateOperator',
+	'filters',
+	'filter',
+	'groupBy',
+	'limit',
+	'having',
+	'orderBy',
+	'functions',
+	'stepInterval',
+	'disabled',
+	'queryName',
+	'legend',
+	'expression',
+	'aggregations',
+];
+
+/** Metrics aggregates over time and then over space, so it carries both steps. */
+const METRICS_AGGREGATION: readonly BuilderField[] = [
+	'timeAggregation',
+	'spaceAggregation',
+];
+
+function omit(
+	fields: readonly BuilderField[],
+	...omitted: BuilderField[]
+): BuilderField[] {
+	return fields.filter((field) => !omitted.includes(field));
+}
+
+const SERIES: readonly BuilderField[] = [...AGGREGATING_FIELDS];
+const SERIES_METRICS: readonly BuilderField[] = [
+	...SERIES,
+	...METRICS_AGGREGATION,
+];
+
+// Table and pie reduce each series to a single cell/slice. Note the asymmetry, carried
+// over from the previous table: `reduceTo` is offered for metrics only.
+const SCALAR_METRICS: readonly BuilderField[] = [...SERIES_METRICS, 'reduceTo'];
+
+/** A single value has no series to group, limit or order. */
+const SINGLE_VALUE: readonly BuilderField[] = [
+	...omit(AGGREGATING_FIELDS, 'groupBy', 'limit', 'orderBy'),
+	'reduceTo',
+];
+const SINGLE_VALUE_METRICS: readonly BuilderField[] = [
+	...SINGLE_VALUE,
+	...METRICS_AGGREGATION,
+];
+
+/** Raw rows carry no aggregation at all. */
+const RAW_ROWS: readonly BuilderField[] = [
+	'queryName',
+	'filters',
+	'filter',
+	'limit',
+	'orderBy',
+	'functions',
+	'aggregations',
+];
+// Metrics rows drop paging and ordering too, as before.
+const RAW_ROWS_METRICS: readonly BuilderField[] = [
+	'queryName',
+	'filters',
+	'filter',
+	'aggregations',
+];
+
+/**
+ * Logs and traces share a builder surface; metrics is the one that differs.
+ *
+ * Each cell gets its own copy. `QueryBuilder`'s provider pushes onto the list it reads
+ * from this map, so cells sharing one array instance would contaminate each other.
+ */
+function bySource(
+	logsAndTraces: readonly BuilderField[],
+	metrics: readonly BuilderField[],
+): Record<DataSource, PanelTypeFormValues> {
+	return {
+		[DataSource.LOGS]: { builder: { queryData: [...logsAndTraces] } },
+		[DataSource.TRACES]: { builder: { queryData: [...logsAndTraces] } },
+		[DataSource.METRICS]: { builder: { queryData: [...metrics] } },
+	};
+}
+
+export const panelTypeDataSourceFormValuesMap: Record<
+	keyof PartialPanelTypes,
+	Record<DataSource, PanelTypeFormValues>
+> = {
+	[PANEL_TYPES.TIME_SERIES]: bySource(SERIES, SERIES_METRICS),
+	[PANEL_TYPES.BAR]: bySource(SERIES, SERIES_METRICS),
+	[PANEL_TYPES.HISTOGRAM]: bySource(SERIES, SERIES_METRICS),
+	[PANEL_TYPES.TABLE]: bySource(SERIES, SCALAR_METRICS),
+	[PANEL_TYPES.PIE]: bySource(SERIES, SCALAR_METRICS),
+	[PANEL_TYPES.VALUE]: bySource(SINGLE_VALUE, SINGLE_VALUE_METRICS),
+	[PANEL_TYPES.LIST]: bySource(RAW_ROWS, RAW_ROWS_METRICS),
+};

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/hooks/usePanelTypeSwitch.ts

@@ -7,10 +7,8 @@ import type {
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	handleQueryChange,
-	type PartialPanelTypes,
-} from 'lib/query/panelQuery';
+import { handleQueryChange } from 'lib/query/panelQuery';
+import type { PartialPanelTypes } from 'lib/query/panelTypeDataSourceFormValuesMap';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { DashboardDetailEvents } from 'pages/DashboardPage/constants/events';
 import type {

frontend/src/providers/QueryBuilder.tsx

@@ -32,7 +32,7 @@ import ROUTES from 'constants/routes';
 import {
 	panelTypeDataSourceFormValuesMap,
 	PartialPanelTypes,
-} from 'lib/query/panelQuery';
+} from 'lib/query/panelTypeDataSourceFormValuesMap';
 import { OptionsQuery } from 'container/OptionsMenu/types';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval';
@@ -767,7 +767,7 @@ export function QueryBuilderProvider({
 						].builder.queryData;
 
 					propsRequired?.push('dataSource');
-					propsRequired?.forEach((p: any) => {
+					propsRequired?.forEach((p) => {
 						set(queryItem, p, get(newQueryItem, p));
 					});
 					return queryItem;