fix(query-builder): stop the panel-type field list growing on every change

`updateSuperSetQueryBuilderData` appended `dataSource` to the field list with
`propsRequired?.push('dataSource')`. That list is the array held in
`panelTypeDataSourceFormValuesMap`, so the module-level table grew by one entry on
every query-builder change, unbounded for the life of the page. It was harmless only
because the assignment it drives is idempotent. The field now travels on a copy.

The guard stays an `if` rather than defaulting to an empty list: the previous
optional chaining meant a panel type outside the builder set copied nothing at all,
`dataSource` included.

Two neighbours in the same area, both no-ops:

- `PANEL_TYPES_INITIAL_QUERY` had exactly one reference in the repo — its own
  definition.
- `PanelTypeKeys` was a hand-written union of the enum's key names that had fallen
  three behind (`BAR`, `PIE`, `HISTOGRAM`), so it is derived now. Nothing relied on
  the omission: `useChartMutable` builds its key array from `Object.keys` through an
  untyped `[].slice.call`, so all nine were already there at runtime.

Assisted-by: Claude Opus 5

frontend/src/constants/queryBuilder.ts

@@ -601,18 +601,6 @@ export const listViewInitialLogQuery: Query = {
 	},
 };
 
-export const PANEL_TYPES_INITIAL_QUERY: Record<PANEL_TYPES, Query> = {
-	[PANEL_TYPES.TIME_SERIES]: initialQueriesMap.metrics,
-	[PANEL_TYPES.VALUE]: initialQueriesMap.metrics,
-	[PANEL_TYPES.TABLE]: initialQueriesMap.metrics,
-	[PANEL_TYPES.LIST]: listViewInitialLogQuery,
-	[PANEL_TYPES.TRACE]: initialQueriesMap.traces,
-	[PANEL_TYPES.BAR]: initialQueriesMap.metrics,
-	[PANEL_TYPES.PIE]: initialQueriesMap.metrics,
-	[PANEL_TYPES.HISTOGRAM]: initialQueriesMap.metrics,
-	[PANEL_TYPES.EMPTY_WIDGET]: initialQueriesMap.metrics,
-};
-
 export const listViewInitialTraceQuery: Query = {
 	// it should be the above commented query
 	...initialQueriesMap.traces,

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.tsx

@@ -8,7 +8,7 @@ import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panel
 import { resolveSignal } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getBuilderQueries';
 import type { EQueryType } from 'types/common/dashboard';
 
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../utils/legendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
 import ConfigActions from './ConfigActions/ConfigActions';
 import SectionSlot from './SectionSlot/SectionSlot';

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/__tests__/PanelTypeSwitcher.test.tsx

@@ -5,18 +5,8 @@ import PanelTypeSwitcher from '../PanelTypeSwitcher';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
-// Stub the registry so the test doesn't pull in the real renderers and chart libs.
 jest.mock('pages/DashboardPage/DashboardContainer/Panels/registry', () => ({
 	getPanelDefinition: jest.fn(),
-	PANEL_OPTIONS: [
-		{ kind: 'signoz/TimeSeriesPanel', displayName: 'Time Series' },
-		{ kind: 'signoz/NumberPanel', displayName: 'Number' },
-		{ kind: 'signoz/TablePanel', displayName: 'Table' },
-		{ kind: 'signoz/BarChartPanel', displayName: 'Bar Chart' },
-		{ kind: 'signoz/PieChartPanel', displayName: 'Pie Chart' },
-		{ kind: 'signoz/HistogramPanel', displayName: 'Histogram' },
-		{ kind: 'signoz/ListPanel', displayName: 'List' },
-	].map((option) => ({ ...option, icon: (): null => null })),
 }));
 
 const mockGetPanelDefinition = getPanelDefinition as unknown as jest.Mock;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/usePanelTypeSelectItems.tsx

@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import type { EQueryType } from 'types/common/dashboard';
 
-import { PANEL_OPTIONS } from '../../../Panels/registry';
 import type { PanelKind } from '../../../Panels/types/panelKind';
+import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
 import type { ConfigSelectItem } from '../controls/ConfigSelect/ConfigSelect';
 
 import { getPanelTypeDisabledReason } from './utils';
@@ -27,17 +27,17 @@ export function usePanelTypeSelectItems({
 }: UsePanelTypeSelectItemsArgs): ConfigSelectItem<PanelKind>[] {
 	return useMemo(
 		() =>
-			PANEL_OPTIONS.map(({ kind, displayName, icon: Icon }) => {
+			PANEL_TYPES.map(({ panelKind, label, Icon }) => {
 				// One reason drives both the disabled flag and the tooltip, so they can't disagree.
 				const disabledReason = getPanelTypeDisabledReason({
-					kind,
+					kind: panelKind,
 					queryType,
 					signal,
-					label: displayName,
+					label,
 				});
 				return {
-					value: kind,
-					label: displayName,
+					value: panelKind,
+					label,
 					icon: <Icon size={14} />,
 					disabled: !!disabledReason,
 					tooltip: disabledReason,

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/LegendColors.tsx

@@ -5,7 +5,7 @@ import { Input } from 'antd';
 import type { DashboardtypesLegendDTOCustomColors } from 'api/generated/services/sigNoz.schemas';
 import { Virtuoso } from 'react-virtuoso';
 
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../../../utils/legendSeries';
 import LegendColorRow from './LegendColorRow';
 import {
 	clearSeriesColor,

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/__tests__/LegendColors.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../../../../utils/legendSeries';
 import LegendColors from '../LegendColors';
 
 const SERIES: LegendSeries[] = [

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/__tests__/legendColors.utils.test.ts

@@ -1,4 +1,4 @@
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../../../../utils/legendSeries';
 import {
 	clearSeriesColor,
 	filterLegendSeries,

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/legendColors.utils.ts

@@ -1,6 +1,6 @@
 import type { DashboardtypesLegendDTOCustomColors } from 'api/generated/services/sigNoz.schemas';
 
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../../../utils/legendSeries';
 
 /** Case-insensitive substring filter over series labels. Empty query → all series. */
 export function filterLegendSeries(

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sectionContext.ts

@@ -1,7 +1,7 @@
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 
 import type { PanelKind } from '../../Panels/types/panelKind';
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../utils/legendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
 import { EQueryType } from 'types/common/dashboard';
 

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/__tests__/VisualizationSection.test.tsx

@@ -11,10 +11,6 @@ jest.mock('pages/DashboardPage/DashboardContainer/Panels/registry', () => ({
 		supportedSignals: ['metrics', 'logs', 'traces'],
 		supportedQueryTypes: ['builder', 'clickhouse_sql', 'promql'],
 	})),
-	PANEL_OPTIONS: [
-		{ kind: 'signoz/TimeSeriesPanel', displayName: 'Time Series' },
-		{ kind: 'signoz/TablePanel', displayName: 'Table' },
-	].map((option) => ({ ...option, icon: (): null => null })),
 }));
 
 // Open the antd Select by clicking its selector, then pick the option by label.

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

@@ -1,27 +1,36 @@
 import { useMemo } from 'react';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
-import { getSectionControls } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getSectionControls';
-import { SectionKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
 import type { PanelQueryData } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
 
+import {
+	type LegendSeries,
+	resolvePieLegendSeries,
+	resolveTimeSeriesLegendSeries,
+} from '../utils/legendSeries';
+
 /**
  * Resolves the panel's rendered series into `{ label, defaultColor }` pairs so the
- * legend-colors control can key overrides by the exact labels the chart draws, using
- * the resolver the kind declares as its `colors` control.
+ * legend-colors control can key overrides by the exact labels the chart draws. Only the
+ * kinds that expose a colors control resolve series (Pie from its scalar slices, Time
+ * Series from its flat series); every other kind returns none.
  */
 export function useLegendSeries(
 	panel: DashboardtypesPanelDTO,
 	data: PanelQueryData,
 ): LegendSeries[] {
 	const isDarkMode = useIsDarkMode();
-	const kind = panel.spec.plugin.kind;
 
 	return useMemo(() => {
-		const resolve = getSectionControls(kind, SectionKind.Legend)?.colors;
-		return resolve
-			? resolve({ queries: panel.spec.queries, data, isDarkMode })
-			: [];
-	}, [kind, panel.spec.queries, data, isDarkMode]);
+		switch (panel.spec.plugin.kind) {
+			case 'signoz/PieChartPanel':
+				return resolvePieLegendSeries(data, isDarkMode);
+			case 'signoz/TimeSeriesPanel':
+			case 'signoz/BarChartPanel':
+			case 'signoz/HistogramPanel':
+				return resolveTimeSeriesLegendSeries(panel.spec.queries, data, isDarkMode);
+			default:
+				return [];
+		}
+	}, [panel.spec.plugin.kind, panel.spec.queries, data, isDarkMode]);
 }

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/utils/legendSeries.ts

@@ -2,9 +2,9 @@ import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schem
 import { themeColors } from 'constants/theme';
 import getLabelName from 'lib/getLabelName';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { preparePieData } from '../kinds/PieChartPanel/prepareData';
-import { getBuilderQueries } from './getBuilderQueries';
-import { resolveSeriesLabelV5 } from './resolveSeriesLabel';
+import { preparePieData } from 'pages/DashboardPage/DashboardContainer/Panels/kinds/PieChartPanel/prepareData';
+import { getBuilderQueries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getBuilderQueries';
+import { resolveSeriesLabelV5 } from 'pages/DashboardPage/DashboardContainer/Panels/utils/resolveSeriesLabel';
 import { prepareScalarTables } from 'pages/DashboardPage/DashboardContainer/queryV5/prepareScalarTables';
 import type { PanelQueryData } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
 import {
@@ -22,15 +22,6 @@ export interface LegendSeries {
 
 type PanelQueries = DashboardtypesPanelDTO['spec']['queries'];
 
-export interface LegendSeriesArgs {
-	queries: PanelQueries;
-	data: PanelQueryData;
-	isDarkMode: boolean;
-}
-
-/** Resolves a kind's output into the legend entries the colors control keys overrides by. */
-export type LegendSeriesResolver = (args: LegendSeriesArgs) => LegendSeries[];
-
 /**
  * Dedupes `labels` (first-seen order, empties dropped) into `{ label, defaultColor }`
  * pairs, resolving each unique label's color lazily via `colorFor` — so a repeated
@@ -57,10 +48,10 @@ function buildLegendSeries(
  * draws (without overrides, so their colors are the defaults) so the color control keys
  * overrides by the same labels the chart does.
  */
-export function resolvePieLegendSeries({
-	data,
-	isDarkMode,
-}: LegendSeriesArgs): LegendSeries[] {
+export function resolvePieLegendSeries(
+	data: PanelQueryData,
+	isDarkMode: boolean,
+): LegendSeries[] {
 	const slices = preparePieData({
 		tables: prepareScalarTables({
 			results: getScalarResults(data.response),
@@ -79,11 +70,11 @@ export function resolvePieLegendSeries({
  * Time-series kinds: resolve each flattened series' label the way the renderer does
  * (`getLabelName` → `resolveSeriesLabelV5`) and color it with `generateColor`.
  */
-export function resolveTimeSeriesLegendSeries({
-	queries,
-	data,
-	isDarkMode,
-}: LegendSeriesArgs): LegendSeries[] {
+export function resolveTimeSeriesLegendSeries(
+	queries: PanelQueries,
+	data: PanelQueryData,
+	isDarkMode: boolean,
+): LegendSeries[] {
 	const palette = isDarkMode
 		? themeColors.chartcolors
 		: themeColors.lightModeColor;

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/BarChartPanel/definition.ts

@@ -1,5 +1,3 @@
-import { BarChart } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
@@ -12,7 +10,6 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
 	kind: 'signoz/BarChartPanel',
 	displayName: 'Bar Chart',
-	icon: BarChart,
 	Renderer,
 	sections,
 	supportedSignals: [

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/BarChartPanel/sections.ts

@@ -1,4 +1,3 @@
-import { resolveTimeSeriesLegendSeries } from '../../utils/legendSeries';
 import {
 	SectionKind,
 	ThresholdVariant,
@@ -14,10 +13,7 @@ export const sections: SectionConfig[] = [
 	},
 	{ kind: SectionKind.Formatting, controls: { unit: true, decimals: true } },
 	{ kind: SectionKind.Axes, controls: { minMax: true, logScale: true } },
-	{
-		kind: SectionKind.Legend,
-		controls: { position: true, colors: resolveTimeSeriesLegendSeries },
-	},
+	{ kind: SectionKind.Legend, controls: { position: true, colors: true } },
 	{
 		kind: SectionKind.Thresholds,
 		controls: { variant: ThresholdVariant.LABEL },

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/HistogramPanel/definition.ts

@@ -1,5 +1,3 @@
-import { BarChart } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
@@ -12,7 +10,6 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
 	kind: 'signoz/HistogramPanel',
 	displayName: 'Histogram',
-	icon: BarChart,
 	Renderer,
 	sections,
 	supportedSignals: [

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/HistogramPanel/sections.ts

@@ -1,4 +1,3 @@
-import { resolveTimeSeriesLegendSeries } from '../../utils/legendSeries';
 import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 
 import { SectionKind, type SectionConfig } from '../../types/sections';
@@ -10,7 +9,7 @@ export const sections: SectionConfig[] = [
 	},
 	{
 		kind: SectionKind.Legend,
-		controls: { position: true, colors: resolveTimeSeriesLegendSeries },
+		controls: { position: true, colors: true },
 		// Merging all queries collapses to one distribution with no legend.
 		isHidden: (spec): boolean =>
 			Boolean(

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/ListPanel/definition.ts

@@ -1,5 +1,3 @@
-import { List } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
@@ -13,7 +11,6 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/ListPanel'> = {
 	kind: 'signoz/ListPanel',
 	displayName: 'List',
-	icon: List,
 	Renderer,
 	// Raw records come from logs and traces; metrics don't produce row data.
 	supportedSignals: [

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/NumberPanel/definition.ts

@@ -1,5 +1,3 @@
-import { Hash } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
@@ -12,7 +10,6 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/NumberPanel'> = {
 	kind: 'signoz/NumberPanel',
 	displayName: 'Number',
-	icon: Hash,
 	Renderer,
 	sections,
 	supportedSignals: [

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/PieChartPanel/definition.ts

@@ -1,5 +1,3 @@
-import { ChartPie } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
@@ -12,7 +10,6 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
 	kind: 'signoz/PieChartPanel',
 	displayName: 'Pie Chart',
-	icon: ChartPie,
 	Renderer,
 	sections,
 	supportedSignals: [

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/PieChartPanel/sections.ts

@@ -1,4 +1,3 @@
-import { resolvePieLegendSeries } from '../../utils/legendSeries';
 import { SectionKind, type SectionConfig } from '../../types/sections';
 
 // Pie has no axes, thresholds, or stacking — just value formatting and a legend
@@ -9,9 +8,6 @@ export const sections: SectionConfig[] = [
 		controls: { switchPanelKind: true, timePreference: true },
 	},
 	{ kind: SectionKind.Formatting, controls: { unit: true, decimals: true } },
-	{
-		kind: SectionKind.Legend,
-		controls: { position: true, colors: resolvePieLegendSeries },
-	},
+	{ kind: SectionKind.Legend, controls: { position: true, colors: true } },
 	{ kind: SectionKind.ContextLinks },
 ];

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TablePanel/definition.ts

@@ -1,5 +1,3 @@
-import { Table } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
@@ -12,7 +10,6 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/TablePanel'> = {
 	kind: 'signoz/TablePanel',
 	displayName: 'Table',
-	icon: Table,
 	Renderer,
 	sections,
 	supportedSignals: [

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TimeSeriesPanel/definition.ts

@@ -1,5 +1,3 @@
-import { ChartLine } from '@signozhq/icons';
-
 import type { PanelDefinition } from '../../types/panelDefinition';
 import Renderer from './Renderer';
 import { sections } from './sections';
@@ -12,7 +10,6 @@ import { EQueryType } from 'types/common/dashboard';
 export const definition: PanelDefinition<'signoz/TimeSeriesPanel'> = {
 	kind: 'signoz/TimeSeriesPanel',
 	displayName: 'Time Series',
-	icon: ChartLine,
 	Renderer,
 	sections,
 	supportedSignals: [

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TimeSeriesPanel/sections.ts

@@ -1,4 +1,3 @@
-import { resolveTimeSeriesLegendSeries } from '../../utils/legendSeries';
 import {
 	SectionKind,
 	ThresholdVariant,
@@ -12,10 +11,7 @@ export const sections: SectionConfig[] = [
 	},
 	{ kind: SectionKind.Formatting, controls: { unit: true, decimals: true } },
 	{ kind: SectionKind.Axes, controls: { minMax: true, logScale: true } },
-	{
-		kind: SectionKind.Legend,
-		controls: { position: true, colors: resolveTimeSeriesLegendSeries },
-	},
+	{ kind: SectionKind.Legend, controls: { position: true, colors: true } },
 	{
 		kind: SectionKind.ChartAppearance,
 		controls: {

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/UnsupportedPanel/definition.ts

@@ -1,5 +1,4 @@
 import { Querybuildertypesv5RequestTypeDTO } from 'api/generated/services/sigNoz.schemas';
-import { TriangleAlert } from '@signozhq/icons';
 
 import {
 	NO_PANEL_ACTIONS,
@@ -19,8 +18,6 @@ import Renderer from './Renderer';
 export const UNSUPPORTED_PANEL: RenderablePanelDefinition = {
 	kind: '<unsupported>' as RenderablePanelDefinition['kind'],
 	displayName: 'Unsupported panel',
-	// Never offered in the UI — the kind lists come from the registry, which omits this.
-	icon: TriangleAlert,
 	Renderer,
 	sections: [],
 	supportedSignals: [],

frontend/src/pages/DashboardPage/DashboardContainer/Panels/registry.ts

@@ -7,33 +7,22 @@ import { definition as Table } from './kinds/TablePanel/definition';
 import { definition as List } from './kinds/ListPanel/definition';
 import { UNSUPPORTED_PANEL } from './kinds/UnsupportedPanel/definition';
 import type {
-	PanelDefinition,
 	PanelRegistry,
 	RenderablePanelDefinition,
 } from './types/panelDefinition';
 import { PanelKind } from './types/panelKind';
 
 // Each kind owns its PanelDefinition; registering a new panel is one entry here.
-// Declaration order is the order kinds are offered in the UI.
 export const PANELS: PanelRegistry = {
 	[TimeSeries.kind]: TimeSeries,
-	[NumberValue.kind]: NumberValue,
-	[Table.kind]: Table,
 	[BarChart.kind]: BarChart,
-	[PieChart.kind]: PieChart,
 	[Histogram.kind]: Histogram,
+	[NumberValue.kind]: NumberValue,
+	[PieChart.kind]: PieChart,
+	[Table.kind]: Table,
 	[List.kind]: List,
 };
 
-export type PanelOption = Pick<
-	PanelDefinition,
-	'kind' | 'displayName' | 'icon'
->;
-
-// Backs both the new-panel picker and the editor's kind switcher; derived from PANELS
-// so a registered kind can't end up unreachable from the UI.
-export const PANEL_OPTIONS: PanelOption[] = Object.values(PANELS);
-
 /**
  * Whether this build can render the kind. `PanelKind` spans every kind the API declares,
  * but a dashboard spec written by a newer SigNoz can name one this client has never heard

frontend/src/pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition.ts

@@ -1,6 +1,5 @@
 import type { ComponentType } from 'react';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import type { ChartLine } from '@signozhq/icons';
 import type { EQueryType } from 'types/common/dashboard';
 
 import type { SectionConfig } from './sections';
@@ -61,14 +60,9 @@ export const NO_PANEL_ACTIONS: PanelActionCapabilities = {
 	drilldown: false,
 };
 
-// Derived from an icon component so the props stay exact (size is a constrained
-// IconSize union) and ForwardRef-compatible.
-export type PanelIcon = typeof ChartLine;
-
 export interface PanelDefinition<K extends PanelKind = PanelKind> {
 	kind: K;
 	displayName: string;
-	icon: PanelIcon;
 	Renderer: ComponentType<PanelRendererProps<K>>;
 	sections: SectionConfig[];
 	/** Signals this kind can visualize. */

frontend/src/pages/DashboardPage/DashboardContainer/Panels/types/sections.ts

@@ -13,7 +13,6 @@ import type {
 	DashboardtypesTimeSeriesChartAppearanceDTO,
 	TelemetrytypesTelemetryFieldKeyDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import type { LegendSeriesResolver } from '../utils/legendSeries';
 import {
 	Antenna,
 	BarChart,
@@ -106,12 +105,7 @@ export interface SectionControls {
 		columnUnits?: boolean;
 	};
 	[SectionKind.Axes]: { minMax?: boolean; logScale?: boolean }; // minMax → softMin/softMax
-	[SectionKind.Legend]: {
-		position?: boolean;
-		// colors → customColors; the resolver supplies the labels overrides are keyed by,
-		// so a kind can't offer color overrides with nothing to color
-		colors?: LegendSeriesResolver;
-	};
+	[SectionKind.Legend]: { position?: boolean; colors?: boolean }; // colors → customColors
 	[SectionKind.ChartAppearance]: {
 		lineStyle?: boolean;
 		lineInterpolation?: boolean;

frontend/src/pages/DashboardPage/DashboardContainer/Panels/utils/__tests__/buildPluginSpec.test.ts

@@ -79,7 +79,7 @@ describe('buildPluginSpec', () => {
 
 		it('omits the key entirely when a seed produces an empty slice (never key: undefined)', () => {
 			const result = buildPluginSpec([
-				{ kind: SectionKind.Legend, controls: { colors: (): [] => [] } },
+				{ kind: SectionKind.Legend, controls: { colors: true } },
 			]);
 
 			expect(result).toStrictEqual({});
@@ -129,7 +129,7 @@ describe('buildPluginSpec', () => {
 		it('seeds neither when their defaulting controls are absent', () => {
 			const sections: SectionConfig[] = [
 				{ kind: SectionKind.Visualization, controls: { switchPanelKind: true } },
-				{ kind: SectionKind.Legend, controls: { colors: (): [] => [] } },
+				{ kind: SectionKind.Legend, controls: { colors: true } },
 			];
 			expect(buildPluginSpec(sections)).toStrictEqual({});
 		});
@@ -180,10 +180,7 @@ describe('buildPluginSpec', () => {
 
 		it('carries old legend position but never customColors', () => {
 			const sections: SectionConfig[] = [
-				{
-					kind: SectionKind.Legend,
-					controls: { position: true, colors: (): [] => [] },
-				},
+				{ kind: SectionKind.Legend, controls: { position: true, colors: true } },
 			];
 			const oldSpec = oldSpecWith({
 				legend: {

frontend/src/pages/DashboardPage/DashboardContainer/Panels/utils/__tests__/getSectionControls.test.ts

@@ -1,46 +0,0 @@
-import { SectionKind, ThresholdVariant } from '../../types/sections';
-import { getSectionControls } from '../getSectionControls';
-
-describe('getSectionControls', () => {
-	it('returns the controls a kind declares for a section', () => {
-		expect(
-			getSectionControls('signoz/TimeSeriesPanel', SectionKind.Formatting),
-		).toStrictEqual({ unit: true, decimals: true });
-	});
-
-	it('distinguishes kinds that key units per column from kinds with a panel unit', () => {
-		expect(
-			getSectionControls('signoz/TablePanel', SectionKind.Formatting)?.unit,
-		).toBeUndefined();
-		expect(
-			getSectionControls('signoz/TablePanel', SectionKind.Formatting)?.columnUnits,
-		).toBe(true);
-	});
-
-	it('reports the threshold variant each kind edits', () => {
-		expect(
-			getSectionControls('signoz/NumberPanel', SectionKind.Thresholds)?.variant,
-		).toBe(ThresholdVariant.COMPARISON);
-		expect(
-			getSectionControls('signoz/BarChartPanel', SectionKind.Thresholds)?.variant,
-		).toBe(ThresholdVariant.LABEL);
-	});
-
-	it('returns undefined when the kind does not expose the section', () => {
-		expect(
-			getSectionControls('signoz/ListPanel', SectionKind.Formatting),
-		).toBeUndefined();
-		expect(
-			getSectionControls('signoz/HistogramPanel', SectionKind.Thresholds),
-		).toBeUndefined();
-	});
-
-	it('returns undefined for an unregistered kind', () => {
-		expect(
-			getSectionControls(
-				'signoz/FuturePanel' as Parameters<typeof getSectionControls>[0],
-				SectionKind.Formatting,
-			),
-		).toBeUndefined();
-	});
-});

frontend/src/pages/DashboardPage/DashboardContainer/Panels/utils/getSectionControls.ts

@@ -1,22 +0,0 @@
-import { getPanelDefinition } from '../registry';
-import type { PanelKind } from '../types/panelKind';
-import type { ControlledSectionKind, SectionControls } from '../types/sections';
-
-/**
- * The controls a kind declares for one section, or `undefined` when it doesn't expose
- * that section — so callers read `kinds/<Kind>/sections.ts` instead of switching on kind.
- */
-export function getSectionControls<K extends ControlledSectionKind>(
-	kind: PanelKind,
-	sectionKind: K,
-): SectionControls[K] | undefined {
-	const section = getPanelDefinition(kind).sections.find(
-		(candidate) => candidate.kind === sectionKind,
-	);
-	if (!section || !('controls' in section)) {
-		return undefined;
-	}
-	// `find` can't correlate the matched member's `controls` with `sectionKind`; the
-	// SectionConfig union guarantees it.
-	return section.controls as SectionControls[K];
-}

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

@@ -4,8 +4,8 @@ import { DialogWrapper } from '@signozhq/ui/dialog';
 import cx from 'classnames';
 
 import { useDashboardSections } from '../../../hooks/useDashboardSections';
-import { PANEL_OPTIONS } from '../../../Panels/registry';
 import type { PanelKind } from '../../../Panels/types/panelKind';
+import { PANEL_TYPES } from './constants';
 import PanelTypeSelectionModalFooter from './PanelTypeSelectionModalFooter';
 import { buildSectionOptions, resolveDefaultSectionValue } from './utils';
 import styles from './PanelTypeSelectionModal.module.scss';
@@ -91,19 +91,19 @@ function PanelTypeSelectionModal({
 					<span className={styles.pickerLabel}>Select panel type</span>
 				)}
 				<div className={styles.grid}>
-					{PANEL_OPTIONS.map(({ kind, displayName, icon: Icon }) => (
+					{PANEL_TYPES.map(({ panelKind, label, Icon }) => (
 						<button
-							key={kind}
+							key={panelKind}
 							type="button"
 							className={cx(styles.panelTypeCard, {
-								[styles.panelTypeCardSelected]: kind === selectedPanelKind,
+								[styles.panelTypeCardSelected]: panelKind === selectedPanelKind,
 							})}
-							data-testid={`panel-type-${kind}`}
-							aria-pressed={kind === selectedPanelKind}
-							onClick={(): void => handleTileClick(kind)}
+							data-testid={`panel-type-${panelKind}`}
+							aria-pressed={panelKind === selectedPanelKind}
+							onClick={(): void => handleTileClick(panelKind)}
 						>
 							<Icon size={24} color={Color.BG_ROBIN_400} />
-							{displayName}
+							{label}
 						</button>
 					))}
 				</div>

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants.ts

@@ -0,0 +1,24 @@
+import {
+	BarChart,
+	ChartLine,
+	ChartPie,
+	Hash,
+	List,
+	Table,
+} from '@signozhq/icons';
+
+import type { PanelType } from './types';
+
+export const PANEL_TYPES: PanelType[] = [
+	{
+		panelKind: 'signoz/TimeSeriesPanel',
+		label: 'Time Series',
+		Icon: ChartLine,
+	},
+	{ panelKind: 'signoz/NumberPanel', label: 'Number', Icon: Hash },
+	{ panelKind: 'signoz/TablePanel', label: 'Table', Icon: Table },
+	{ panelKind: 'signoz/BarChartPanel', label: 'Bar Chart', Icon: BarChart },
+	{ panelKind: 'signoz/PieChartPanel', label: 'Pie Chart', Icon: ChartPie },
+	{ panelKind: 'signoz/HistogramPanel', label: 'Histogram', Icon: BarChart },
+	{ panelKind: 'signoz/ListPanel', label: 'List', Icon: List },
+];

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

@@ -1,11 +1,20 @@
 import type { IconSize } from '@signozhq/icons';
 import type { ComponentType, SVGProps } from 'react';
 
+import type { PanelKind } from '../../../Panels/types/panelKind';
+
 type IconProps = Omit<SVGProps<SVGSVGElement>, 'ref'> & {
 	size?: number | IconSize;
 	strokeWidth?: number;
 };
 
+export interface PanelType {
+	panelKind: PanelKind;
+	label: string;
+	/** Icon component — the consumer renders it and controls size/color/etc. */
+	Icon: ComponentType<IconProps>;
+}
+
 export interface SectionOption {
 	/** The section's `layoutIndex`, stringified for the Select value. */
 	value: string;

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/utils/buildCreateAlertUrl.ts

@@ -8,24 +8,24 @@ import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-import {
-	SectionKind,
-	type PanelFormattingSlice,
-} from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
-import { getSectionControls } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getSectionControls';
 import { fromPerses } from 'pages/DashboardPage/DashboardContainer/queryV5/persesQueryAdapters';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { deriveAlertPrefill, PanelAlertPrefill } from './deriveAlertPrefill';
 
-/** The panel's configured y-axis unit, for the kinds that declare one. */
+/** The panel's configured y-axis unit, for the kinds that carry one. */
 export function readPanelUnit(
 	plugin: DashboardtypesPanelPluginDTO,
 ): string | undefined {
-	if (!getSectionControls(plugin.kind, SectionKind.Formatting)?.unit) {
-		return undefined;
+	switch (plugin.kind) {
+		case 'signoz/TimeSeriesPanel':
+		case 'signoz/BarChartPanel':
+		case 'signoz/NumberPanel':
+		case 'signoz/PieChartPanel':
+			return plugin.spec.formatting?.unit;
+		default:
+			return undefined;
 	}
-	return (plugin.spec as { formatting?: PanelFormattingSlice }).formatting?.unit;
 }
 
 /**

frontend/src/pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/utils/deriveAlertPrefill.ts

@@ -11,15 +11,7 @@ import {
 	AlertThresholdOperator,
 	Threshold,
 } from 'container/CreateAlertV2/context/types';
-import {
-	SectionKind,
-	ThresholdVariant,
-} from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
-import {
-	THRESHOLD_COLOR_DANGER_ORDER,
-	type ComparisonThresholdShape,
-} from 'pages/DashboardPage/DashboardContainer/Panels/types/threshold';
-import { getSectionControls } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getSectionControls';
+import { THRESHOLD_COLOR_DANGER_ORDER } from 'pages/DashboardPage/DashboardContainer/Panels/types/threshold';
 import type { MetricAggregation } from 'types/api/v5/queryRange';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { ReduceOperators } from 'types/common/queryBuilder';
@@ -72,35 +64,27 @@ export function uniformReduceTo(query: Query): ReduceOperators | undefined {
 		: undefined;
 }
 
-/**
- * The panel's thresholds, normalized for alert prefill, read through the variant the
- * kind declares. A `table` variant contributes nothing: per-column thresholds have no
- * meaning for a panel-wide alert condition.
- */
 function readPanelThresholds(
 	plugin: DashboardtypesPanelPluginDTO,
 ): NormalizedPanelThreshold[] {
-	const variant = getSectionControls(
-		plugin.kind,
-		SectionKind.Thresholds,
-	)?.variant;
-	if (
-		variant !== ThresholdVariant.LABEL &&
-		variant !== ThresholdVariant.COMPARISON
-	) {
-		return [];
+	switch (plugin.kind) {
+		case 'signoz/TimeSeriesPanel':
+		case 'signoz/BarChartPanel':
+			return (plugin.spec.thresholds ?? []).map((t) => ({
+				color: t.color,
+				value: t.value,
+				unit: t.unit,
+			}));
+		case 'signoz/NumberPanel':
+			return (plugin.spec.thresholds ?? []).map((t) => ({
+				color: t.color,
+				value: t.value,
+				unit: t.unit,
+				operator: t.operator,
+			}));
+		default:
+			return [];
 	}
-	const thresholds =
-		(plugin.spec as { thresholds?: ComparisonThresholdShape[] }).thresholds ?? [];
-	return thresholds.map((threshold) => ({
-		color: threshold.color,
-		value: threshold.value,
-		unit: threshold.unit,
-		// Only comparison thresholds carry an operator.
-		...(variant === ThresholdVariant.COMPARISON && {
-			operator: threshold.operator,
-		}),
-	}));
 }
 
 // Match case-insensitively (picker emits lowercase hex); unknown colors sort last.

frontend/src/pages/DashboardPage/PanelEditorPage/newPanelSeed.ts

@@ -12,7 +12,6 @@ import {
 	buildPluginSpec,
 	type SeededPluginSpec,
 } from '../DashboardContainer/Panels/utils/buildPluginSpec';
-import { getSectionControls } from '../DashboardContainer/Panels/utils/getSectionControls';
 import { toPerses } from '../DashboardContainer/queryV5/persesQueryAdapters';
 
 interface NewPanelSeed {
@@ -22,6 +21,15 @@ interface NewPanelSeed {
 	pluginSpec: SeededPluginSpec;
 }
 
+function kindSupportsUnit(kind: PanelKind): boolean {
+	return getPanelDefinition(kind).sections.some(
+		(section) =>
+			section.kind === SectionKind.Formatting &&
+			'controls' in section &&
+			section.controls.unit === true,
+	);
+}
+
 /** Kind to fall back to for a query language a builder-only kind (List) can't hold. */
 const FALLBACK_KIND_BY_QUERY_TYPE: Partial<Record<EQueryType, PanelKind>> = {
 	[EQueryType.PROM]: 'signoz/TimeSeriesPanel',
@@ -66,10 +74,7 @@ export function buildNewPanelSeed(
 	const queries = converted.length > 0 ? converted : buildDefaultQueries(kind);
 
 	// Explorers put the single `unit` on the query itself, not the panel spec.
-	if (
-		compositeQuery.unit &&
-		getSectionControls(kind, SectionKind.Formatting)?.unit
-	) {
+	if (compositeQuery.unit && kindSupportsUnit(kind)) {
 		return {
 			kind,
 			queries,

frontend/src/providers/QueryBuilder.tsx

@@ -766,10 +766,15 @@ export function QueryBuilderProvider({
 							queryItem.dataSource
 						].builder.queryData;
 
-					propsRequired?.push('dataSource');
-					propsRequired?.forEach((p: any) => {
-						set(queryItem, p, get(newQueryItem, p));
-					});
+					// `dataSource` travels with the panel type's fields, but is appended to a
+					// copy: `propsRequired` is the list held in
+					// `panelTypeDataSourceFormValuesMap`, and pushing onto it grew that
+					// module-level array by one entry on every call.
+					if (propsRequired) {
+						[...propsRequired, 'dataSource'].forEach((p: any) => {
+							set(queryItem, p, get(newQueryItem, p));
+						});
+					}
 					return queryItem;
 				}
 

frontend/src/types/common/queryBuilder.ts

@@ -211,13 +211,11 @@ export enum QueryFunctionsTypes {
 	FILL_ZERO = 'fillZero',
 }
 
-export type PanelTypeKeys =
-	| 'TIME_SERIES'
-	| 'VALUE'
-	| 'TABLE'
-	| 'LIST'
-	| 'TRACE'
-	| 'EMPTY_WIDGET';
+/**
+ * Key names of {@link PANEL_TYPES}. Derived rather than listed: the hand-written
+ * version had fallen behind the enum by three members (`BAR`, `PIE`, `HISTOGRAM`).
+ */
+export type PanelTypeKeys = keyof typeof PANEL_TYPES;
 
 export enum ReduceOperators {
 	LAST = 'last',