Merge branch 'main' into nv/area-chart

docs/api/openapi.yml

@@ -2646,6 +2646,54 @@ components:
         repeatVariable:
           type: string
       type: object
+    DashboardtypesAreaChartAppearance:
+      properties:
+        fillMode:
+          $ref: '#/components/schemas/DashboardtypesAreaFillMode'
+        fillOpacity:
+          $ref: '#/components/schemas/DashboardtypesFillOpacity'
+        lineInterpolation:
+          $ref: '#/components/schemas/DashboardtypesLineInterpolation'
+        lineStyle:
+          $ref: '#/components/schemas/DashboardtypesLineStyle'
+        showPoints:
+          type: boolean
+        spanGaps:
+          $ref: '#/components/schemas/DashboardtypesSpanGaps'
+      type: object
+    DashboardtypesAreaChartPanelSpec:
+      properties:
+        axes:
+          $ref: '#/components/schemas/DashboardtypesAxes'
+        chartAppearance:
+          $ref: '#/components/schemas/DashboardtypesAreaChartAppearance'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
+        legend:
+          $ref: '#/components/schemas/DashboardtypesLegend'
+        thresholds:
+          items:
+            $ref: '#/components/schemas/DashboardtypesThresholdWithLabel'
+          nullable: true
+          type: array
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesAreaChartVisualization'
+      type: object
+    DashboardtypesAreaChartVisualization:
+      properties:
+        fillSpans:
+          type: boolean
+        stack:
+          $ref: '#/components/schemas/DashboardtypesStackMode'
+        timePreference:
+          $ref: '#/components/schemas/DashboardtypesTimePreference'
+      type: object
+    DashboardtypesAreaFillMode:
+      enum:
+      - solid
+      - gradient
+      - none
+      type: string
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -2877,6 +2925,11 @@ components:
       - gradient
       - none
       type: string
+    DashboardtypesFillOpacity:
+      maximum: 1
+      minimum: 0
+      nullable: true
+      type: number
     DashboardtypesGettableDashboardV2:
       properties:
         createdAt:
@@ -3294,6 +3347,7 @@ components:
     DashboardtypesPanelPlugin:
       discriminator:
         mapping:
+          signoz/AreaChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
@@ -3305,6 +3359,7 @@ components:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
@@ -3315,12 +3370,25 @@ components:
       enum:
       - signoz/TimeSeriesPanel
       - signoz/BarChartPanel
+      - signoz/AreaChartPanel
       - signoz/NumberPanel
       - signoz/PieChartPanel
       - signoz/TablePanel
       - signoz/HistogramPanel
       - signoz/ListPanel
       type: string
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/AreaChartPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesAreaChartPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
         kind:
@@ -3639,6 +3707,12 @@ components:
             are connected.
           type: boolean
       type: object
+    DashboardtypesStackMode:
+      enum:
+      - none
+      - normal
+      - percent
+      type: string
     DashboardtypesStorableDashboardData:
       additionalProperties: {}
       type: object

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -28,9 +28,6 @@ interface FieldsSelectorProps {
 	signal: DataSource;
 	maxFields?: number;
 	requiredFields?: readonly string[];
-	// Lets users add a free-typed field which
-	// does not show up in the suggestions
-	allowCustomFields?: boolean;
 	width?: number;
 	height?: number;
 	defaultPosition?: { x: number; y: number };
@@ -49,7 +46,6 @@ function FieldsSelectorContent({
 	signal,
 	maxFields,
 	requiredFields,
-	allowCustomFields,
 	width = DEFAULT_PANEL_WIDTH,
 	height,
 	defaultPosition,
@@ -71,7 +67,7 @@ function FieldsSelectorContent({
 
 	const handleInputChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = e.target.value.trim();
+			const value = e.target.value.trim().toLowerCase();
 			setInputValue(value);
 			debouncedUpdate(value);
 		},
@@ -157,7 +153,6 @@ function FieldsSelectorContent({
 					addedFields={draftFields}
 					onAdd={handleAdd}
 					isAtLimit={isAtLimit}
-					allowCustomFields={allowCustomFields}
 				/>
 
 				{hasUnsavedChanges && (
@@ -197,7 +192,7 @@ function FieldsSelector({
 		() =>
 			fields.map((f) => ({
 				...f,
-				key: buildCompositeKey(f.name, f.fieldContext),
+				key: f.key ?? buildCompositeKey(f.name, f.fieldContext),
 			})),
 		[fields],
 	);

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -21,7 +21,6 @@ interface OtherFieldsProps {
 	addedFields: TelemetryFieldKey[];
 	onAdd: (field: TelemetryFieldKey) => void;
 	isAtLimit: boolean;
-	allowCustomFields?: boolean;
 }
 
 function OtherFields({
@@ -30,7 +29,6 @@ function OtherFields({
 	addedFields,
 	onAdd,
 	isAtLimit,
-	allowCustomFields,
 }: OtherFieldsProps): JSX.Element {
 	const { data, isFetching } = useGetQueryKeySuggestions(
 		{
@@ -47,45 +45,25 @@ function OtherFields({
 		},
 	);
 
-	const otherFields = useMemo<TelemetryFieldKey[]>(() => {
-		const rawSuggestions = Object.values(data?.data.data.keys || {}).flat();
+	const otherFields: TelemetryFieldKey[] = useMemo(() => {
+		const suggestions = Object.values(data?.data.data.keys || {}).flat();
 		// Normalize: synthesize `key` once so downstream reads can trust it.
-		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
-			...attr,
-			key: buildCompositeKey(attr.name, attr.fieldContext as string),
-			signal: attr.signal as SignalType,
-			fieldContext: attr.fieldContext as FieldContext,
-			fieldDataType: attr.fieldDataType,
-		}));
-		const addedIds = new Set(
-			addedFields.map((f) => buildCompositeKey(f.name, f.fieldContext)),
+		const normalizedSuggestions: TelemetryFieldKey[] = suggestions.map(
+			(attr) => ({
+				...attr,
+				key: buildCompositeKey(attr.name, attr.fieldContext as string),
+				signal: attr.signal as SignalType,
+				fieldContext: attr.fieldContext as FieldContext,
+				fieldDataType: attr.fieldDataType,
+			}),
 		);
-		const available = suggestions.filter(
+		const addedIds = new Set(
+			addedFields.map((f) => f.key ?? buildCompositeKey(f.name, f.fieldContext)),
+		);
+		return normalizedSuggestions.filter(
 			(attr) => !addedIds.has(attr.key as string),
 		);
-
-		// Prepend the custom field when its name is not in suggestions and
-		// not already added.
-		const typed = debouncedInputValue.trim();
-		const nameMatches = (list: TelemetryFieldKey[]): boolean =>
-			list.some((f) => f.name.toLowerCase() === typed.toLowerCase());
-		const showCustom =
-			!!allowCustomFields &&
-			typed.length > 0 &&
-			!nameMatches(suggestions) &&
-			!nameMatches(addedFields);
-
-		if (!showCustom) {
-			return available;
-		}
-		const customField: TelemetryFieldKey = {
-			name: typed,
-			fieldContext: '',
-			fieldDataType: '',
-			key: buildCompositeKey(typed, ''),
-		};
-		return [customField, ...available];
-	}, [data, addedFields, allowCustomFields, debouncedInputValue]);
+	}, [data, addedFields]);
 
 	if (isFetching) {
 		return (

frontend/src/components/FieldsSelector/__tests__/AddedFields.test.tsx

@@ -11,7 +11,7 @@ const makeField = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
 	signal: 'logs',
 	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
 	fieldDataType: 'string',
-	key: `${fieldContext}:${name}`,
+	key: `${fieldContext}.${name}`,
 });
 
 describe('AddedFields — requiredFields', () => {
@@ -33,7 +33,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log:a', 'log:c']}
+				requiredFields={['log.a', 'log.c']}
 			/>,
 		);
 
@@ -50,7 +50,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log:a']}
+				requiredFields={['log.a']}
 			/>,
 		);
 
@@ -68,7 +68,7 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log:body']}
+				requiredFields={['log.body']}
 			/>,
 		);
 
@@ -101,11 +101,11 @@ describe('AddedFields — requiredFields', () => {
 				inputValue=""
 				fields={fields}
 				onFieldsChange={jest.fn()}
-				requiredFields={['log:body']}
+				requiredFields={['log.body']}
 			/>,
 		);
 
-		// 'log:body' locked, 'log:body_extra' removable.
+		// 'log.body' locked, 'log.body_extra' removable.
 		expect(screen.getAllByRole('button', { name: /remove/i })).toHaveLength(1);
 	});
 });

frontend/src/components/FieldsSelector/__tests__/FieldsSelector.test.tsx

@@ -1,188 +0,0 @@
-import { act, fireEvent, render, screen } from 'tests/test-utils';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-import FieldsSelector from '../FieldsSelector';
-
-jest.mock('hooks/querySuggestions/useGetQueryKeySuggestions');
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-// FloatingPanel is a react-rnd/portal shell — presentation only. Render its
-// children directly so the test exercises the column-editing behavior.
-jest.mock('periscope/components/FloatingPanel', () => ({
-	FloatingPanel: ({ children }: { children: React.ReactNode }): JSX.Element => (
-		<div>{children}</div>
-	),
-}));
-
-const mockSuggestions = (names: string[]): void => {
-	(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-		data: {
-			data: {
-				data: {
-					keys: {
-						attributeKeys: names.map((name) => ({
-							name,
-							signal: 'logs',
-							fieldDataType: 'string',
-							fieldContext: '',
-						})),
-					},
-				},
-			},
-		},
-		isFetching: false,
-	});
-};
-
-const field = (name: string, fieldContext = 'log'): TelemetryFieldKey => ({
-	name,
-	signal: 'logs',
-	fieldContext: fieldContext as TelemetryFieldKey['fieldContext'],
-	fieldDataType: 'string',
-});
-
-const renderPanel = (
-	props: Partial<React.ComponentProps<typeof FieldsSelector>> = {},
-): { onFieldsChange: jest.Mock } => {
-	const onFieldsChange = jest.fn();
-	render(
-		<FieldsSelector
-			isOpen
-			title="Edit columns"
-			fields={props.fields ?? []}
-			onFieldsChange={onFieldsChange}
-			onClose={jest.fn()}
-			signal={DataSource.LOGS}
-			allowCustomFields
-			{...props}
-		/>,
-	);
-	return { onFieldsChange };
-};
-
-// Type into the search box and flush the 400ms debounce so OtherFields (driven
-// by the debounced value) recomputes.
-const typeSearch = (value: string): void => {
-	const input = screen.getByPlaceholderText('Search for a field...');
-	act(() => {
-		fireEvent.change(input, { target: { value } });
-	});
-	act(() => {
-		jest.advanceTimersByTime(400);
-	});
-};
-
-describe('FieldsSelector — edit columns (integration)', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-		mockSuggestions([]);
-	});
-
-	afterEach(() => {
-		jest.runOnlyPendingTimers();
-		jest.useRealTimers();
-	});
-
-	it('adds a free-typed field end to end and saves the synthesized key', () => {
-		const { onFieldsChange } = renderPanel({ fields: [field('body')] });
-
-		typeSearch('orderId');
-
-		// custom option surfaces in OTHER FIELDS (only Add button, no suggestions)
-		expect(screen.getByText('orderId')).toBeInTheDocument();
-
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /^add$/i }));
-		});
-
-		// moved into ADDED FIELDS → OTHER FIELDS has nothing left to offer
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-
-		// Save commits the draft
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
-		});
-
-		expect(onFieldsChange).toHaveBeenCalledTimes(1);
-		const saved = onFieldsChange.mock.calls[0][0] as TelemetryFieldKey[];
-		expect(saved).toStrictEqual(
-			expect.arrayContaining([
-				expect.objectContaining({
-					name: 'orderId',
-					fieldContext: '',
-					fieldDataType: '',
-					key: 'orderId',
-				}),
-			]),
-		);
-	});
-
-	it('adds a suggested field: it moves from OTHER FIELDS into ADDED FIELDS', () => {
-		mockSuggestions(['service.name']);
-		const { onFieldsChange } = renderPanel({ fields: [] });
-
-		const addButton = screen.getByRole('button', { name: /^add$/i });
-		act(() => {
-			fireEvent.click(addButton);
-		});
-
-		// now removable in ADDED FIELDS, no longer offered in OTHER FIELDS
-		expect(screen.getByRole('button', { name: /remove/i })).toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /^add$/i }),
-		).not.toBeInTheDocument();
-
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
-		});
-		const saved = onFieldsChange.mock.calls[0][0] as TelemetryFieldKey[];
-		expect(saved.map((f) => f.name)).toContain('service.name');
-	});
-
-	it('hides the custom option when the typed name is already added', () => {
-		renderPanel({ fields: [field('orderId')] });
-
-		typeSearch('ORDERID');
-
-		// exact name already added → nothing left to offer in OTHER FIELDS
-		expect(screen.queryByText('ORDERID')).not.toBeInTheDocument();
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-	});
-
-	it('does not offer a custom option when allowCustomFields is off', () => {
-		renderPanel({ fields: [], allowCustomFields: false });
-
-		typeSearch('unknown.a.b.c');
-
-		// no custom row and nothing addable
-		expect(screen.queryByText('unknown.a.b.c')).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /^add$/i }),
-		).not.toBeInTheDocument();
-	});
-
-	it('discards an added field, reverting the draft', () => {
-		const { onFieldsChange } = renderPanel({ fields: [field('body')] });
-
-		typeSearch('orderId');
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /^add$/i }));
-		});
-
-		// clear the search so the added list is not filtered
-		typeSearch('');
-
-		act(() => {
-			fireEvent.click(screen.getByRole('button', { name: /discard/i }));
-		});
-
-		expect(screen.queryByText('orderId')).not.toBeInTheDocument();
-		expect(onFieldsChange).not.toHaveBeenCalled();
-	});
-});

frontend/src/components/FieldsSelector/__tests__/OtherFields.test.tsx

@@ -1,125 +0,0 @@
-import { fireEvent, render, screen } from 'tests/test-utils';
-import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { DataSource } from 'types/common/queryBuilder';
-
-import OtherFields from '../OtherFields';
-
-jest.mock('hooks/querySuggestions/useGetQueryKeySuggestions');
-
-const mockSuggestions = (names: string[]): void => {
-	(useGetQueryKeySuggestions as jest.Mock).mockReturnValue({
-		data: {
-			data: {
-				data: {
-					keys: {
-						attributeKeys: names.map((name) => ({
-							name,
-							signal: 'logs',
-							fieldDataType: 'string',
-							fieldContext: '',
-						})),
-					},
-				},
-			},
-		},
-		isFetching: false,
-	});
-};
-
-const renderOtherFields = (
-	props: Partial<React.ComponentProps<typeof OtherFields>> = {},
-): { onAdd: jest.Mock } => {
-	const onAdd = jest.fn();
-	render(
-		<OtherFields
-			signal={DataSource.LOGS}
-			debouncedInputValue=""
-			addedFields={[]}
-			onAdd={onAdd}
-			isAtLimit={false}
-			allowCustomFields
-			{...props}
-		/>,
-	);
-	return { onAdd };
-};
-
-const addedField = (name: string): TelemetryFieldKey => ({
-	name,
-	signal: 'logs',
-	fieldContext: '',
-	fieldDataType: '',
-	key: name,
-});
-
-describe('OtherFields — custom (free-typed) option', () => {
-	beforeEach(() => {
-		mockSuggestions([]);
-	});
-
-	it('shows a custom option for a typed name that is not a suggestion', () => {
-		renderOtherFields({ debouncedInputValue: 'unknown.a.b.c' });
-
-		expect(screen.getByText('unknown.a.b.c')).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /add/i })).toBeInTheDocument();
-	});
-
-	it('synthesizes the field with raw name, empty context/type, on add', () => {
-		const { onAdd } = renderOtherFields({ debouncedInputValue: 'orderId' });
-
-		fireEvent.click(screen.getByRole('button', { name: /add/i }));
-
-		expect(onAdd).toHaveBeenCalledWith({
-			name: 'orderId',
-			fieldContext: '',
-			fieldDataType: '',
-			key: 'orderId',
-		});
-	});
-
-	it('hides the custom option when an exact suggestion exists (case-insensitive)', () => {
-		mockSuggestions(['orderId']);
-		renderOtherFields({ debouncedInputValue: 'orderid' });
-
-		// the real suggestion shows, the lowercased custom name does not
-		expect(screen.getByText('orderId')).toBeInTheDocument();
-		expect(screen.queryByText('orderid')).not.toBeInTheDocument();
-	});
-
-	it('hides the custom option when the name is already added (case-insensitive)', () => {
-		renderOtherFields({
-			debouncedInputValue: 'ORDERID',
-			addedFields: [addedField('orderId')],
-		});
-
-		expect(screen.queryByText('ORDERID')).not.toBeInTheDocument();
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-	});
-
-	it('does not show the custom option when allowCustomFields is off', () => {
-		renderOtherFields({
-			debouncedInputValue: 'unknown.a.b.c',
-			allowCustomFields: false,
-		});
-
-		expect(screen.queryByText('unknown.a.b.c')).not.toBeInTheDocument();
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-	});
-
-	it('does not show the custom option for an empty input', () => {
-		renderOtherFields({ debouncedInputValue: '   ' });
-
-		expect(screen.getByText('No values found')).toBeInTheDocument();
-	});
-
-	it('shows the custom option at the field limit but hides its Add button', () => {
-		renderOtherFields({ debouncedInputValue: 'unknown.a.b.c', isAtLimit: true });
-
-		// same as every other row at the limit: name shown, no Add button
-		expect(screen.getByText('unknown.a.b.c')).toBeInTheDocument();
-		expect(
-			screen.queryByRole('button', { name: /add/i }),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/components/Logs/TableView/__tests__/useLogsTableColumns.test.tsx

@@ -51,13 +51,13 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		);
 
 		// body/timestamp appear where the caller placed them, keyed by their
-		// composite IDs ('log:*'); contextless user fields collapse to bare name.
+		// composite IDs ('log.*'); contextless user fields collapse to bare name.
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
 			'service.name',
-			'log:body',
+			'log.body',
 			'request.id',
-			'log:timestamp',
+			'log.timestamp',
 		]);
 	});
 
@@ -70,14 +70,14 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		);
 
 		const byId = new Map(result.current.map((c) => [c.id, c]));
-		// Attribute variant is its own column, not a duplicate 'log:body'.
+		// Attribute variant is its own column, not a duplicate 'log.body'.
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
-			'log:body',
-			'attribute:body',
+			'log.body',
+			'attribute.body',
 		]);
-		expect(byId.get('log:body')?.enableRemove).toBe(false);
-		expect(byId.get('attribute:body')?.enableRemove).toBe(true);
+		expect(byId.get('log.body')?.enableRemove).toBe(false);
+		expect(byId.get('attribute.body')?.enableRemove).toBe(true);
 	});
 
 	it('applies the same distinct-column treatment to timestamp variants', () => {
@@ -91,11 +91,11 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 		const byId = new Map(result.current.map((c) => [c.id, c]));
 		expect(result.current.map((c) => c.id)).toStrictEqual([
 			'state-indicator',
-			'log:timestamp',
-			'attribute:timestamp',
+			'log.timestamp',
+			'attribute.timestamp',
 		]);
-		expect(byId.get('log:timestamp')?.enableRemove).toBe(false);
-		expect(byId.get('attribute:timestamp')?.enableRemove).toBe(true);
+		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
+		expect(byId.get('attribute.timestamp')?.enableRemove).toBe(true);
 	});
 
 	it('skips the synthetic "id" field name', () => {
@@ -127,10 +127,10 @@ describe('useLogsTableColumns — selectColumns-order respected', () => {
 
 		const byId = new Map(result.current.map((c) => [c.id, c]));
 		// body + timestamp are locked from the table-X removal pathway.
-		expect(byId.get('log:body')?.canBeHidden).toBe(false);
-		expect(byId.get('log:body')?.enableRemove).toBe(false);
-		expect(byId.get('log:timestamp')?.canBeHidden).toBe(false);
-		expect(byId.get('log:timestamp')?.enableRemove).toBe(false);
+		expect(byId.get('log.body')?.canBeHidden).toBe(false);
+		expect(byId.get('log.body')?.enableRemove).toBe(false);
+		expect(byId.get('log.timestamp')?.canBeHidden).toBe(false);
+		expect(byId.get('log.timestamp')?.enableRemove).toBe(false);
 		// User-added fields stay removable. User field has type='' so composite
 		// collapses to bare name.
 		expect(byId.get('user_field')?.enableRemove).toBe(true);

frontend/src/components/TanStackTableView/TanStackHeaderRow.module.scss

@@ -44,13 +44,6 @@
 			--tanstack-first-column-header-bg,
 			var(--tanstack-table-header-cell-bg, var(--l2-background))
 		) !important;
-		padding-left: var(
-			--tanstack-cell-header-padding-left-first-column,
-			var(
-				--tanstack-cell-header-padding-left-override,
-				var(--tanstack-cell-padding-left, 0.3rem)
-			)
-		);
 	}
 }
 

frontend/src/components/TanStackTableView/TanStackTable.module.scss

@@ -161,7 +161,7 @@
 .tableHeaderCell {
 	padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
 		var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
-	height: var(--tanstack-table-header-height, 36px);
+	height: 36px;
 	text-align: left;
 	font-size: 14px;
 	font-style: normal;

frontend/src/constants/localStorage.ts

@@ -11,7 +11,6 @@ export enum LOCALSTORAGE {
 	TRACES_LIST_OPTIONS = 'TRACES_LIST_OPTIONS',
 	GRAPH_VISIBILITY_STATES = 'GRAPH_VISIBILITY_STATES',
 	TRACES_LIST_COLUMNS = 'TRACES_LIST_COLUMNS',
-	TRACES_VIEW_COLUMNS = 'TRACES_VIEW_COLUMNS',
 	LOGS_LIST_COLUMNS = 'LOGS_LIST_COLUMNS',
 	LOGS_LIST_COLUMN_SIZING = 'LOGS_LIST_COLUMN_SIZING',
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -275,7 +275,6 @@ function LiveLogsContainer({
 					onClose={(): void => setIsFieldsSelectorOpen(false)}
 					signal={DataSource.LOGS}
 					requiredFields={LOGS_REQUIRED_COLUMNS}
-					allowCustomFields
 				/>
 			)}
 		</div>

frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx

@@ -113,7 +113,6 @@ function LogsActionsContainer({
 					onClose={(): void => setIsFieldsSelectorOpen(false)}
 					signal={DataSource.LOGS}
 					requiredFields={LOGS_REQUIRED_COLUMNS}
-					allowCustomFields
 				/>
 			)}
 		</div>

frontend/src/container/OptionsMenu/__test__/useOptionsMenu.test.ts

@@ -296,12 +296,12 @@ describe('useOptionsMenu', () => {
 				}),
 			);
 
-			// New order: [attribute:service.name, log:body, resource:service.name, log:timestamp]
+			// New order: [attribute.service.name, log.body, resource.service.name, log.timestamp]
 			result.current.config.addColumn?.onReorder([
-				'attribute:service.name',
-				'log:body',
-				'resource:service.name',
-				'log:timestamp',
+				'attribute.service.name',
+				'log.body',
+				'resource.service.name',
+				'log.timestamp',
 			]);
 
 			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
@@ -309,13 +309,13 @@ describe('useOptionsMenu', () => {
 			expect(
 				reordered.map(
 					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}:${c.name}`,
+						`${c.fieldContext}.${c.name}`,
 				),
 			).toStrictEqual([
-				'attribute:service.name',
-				'log:body',
-				'resource:service.name',
-				'log:timestamp',
+				'attribute.service.name',
+				'log.body',
+				'resource.service.name',
+				'log.timestamp',
 			]);
 		});
 
@@ -329,11 +329,11 @@ describe('useOptionsMenu', () => {
 
 			result.current.config.addColumn?.onReorder([
 				'state-indicator',
-				'log:timestamp',
+				'log.timestamp',
 				'unknown.composite',
-				'log:body',
-				'resource:service.name',
-				'attribute:service.name',
+				'log.body',
+				'resource.service.name',
+				'attribute.service.name',
 			]);
 
 			const reordered = mockUpdateColumns.mock.calls[0][0];
@@ -341,13 +341,13 @@ describe('useOptionsMenu', () => {
 			expect(
 				reordered.map(
 					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}:${c.name}`,
+						`${c.fieldContext}.${c.name}`,
 				),
 			).toStrictEqual([
-				'log:timestamp',
-				'log:body',
-				'resource:service.name',
-				'attribute:service.name',
+				'log.timestamp',
+				'log.body',
+				'resource.service.name',
+				'attribute.service.name',
 			]);
 		});
 
@@ -359,17 +359,17 @@ describe('useOptionsMenu', () => {
 				}),
 			);
 
-			// Removing 'resource:service.name' should drop ONLY the resource variant.
-			result.current.config.addColumn?.onRemove('resource:service.name');
+			// Removing 'resource.service.name' should drop ONLY the resource variant.
+			result.current.config.addColumn?.onRemove('resource.service.name');
 
 			expect(mockUpdateColumns).toHaveBeenCalledTimes(1);
 			const remaining = mockUpdateColumns.mock.calls[0][0];
 			expect(
 				remaining.map(
 					(c: { name: string; fieldContext: string }) =>
-						`${c.fieldContext}:${c.name}`,
+						`${c.fieldContext}.${c.name}`,
 				),
-			).toStrictEqual(['log:body', 'attribute:service.name', 'log:timestamp']);
+			).toStrictEqual(['log.body', 'attribute.service.name', 'log.timestamp']);
 		});
 
 		it('removing by a non-matching composite ID is a no-op (filter returns the full list)', () => {

frontend/src/container/OptionsMenu/utils.ts

@@ -16,7 +16,7 @@ export const getOptionsFromKeys = (
 };
 
 // Composite identity for a column. Disambiguates same-name fields across
-// different fieldContexts (e.g. resource:service.name vs attribute:service.name).
+// different fieldContexts (e.g. resource.service.name vs attribute.service.name).
 // Falls back to bare name when context is missing.
 export const buildCompositeKey = (name: string, context?: string): string =>
-	context ? `${context}:${name}` : name;
+	context ? `${context}.${name}` : name;

frontend/src/container/TracesExplorer/ListView/ListView.module.scss

@@ -1,8 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	height: calc(100vh - 240px);
-	min-height: 400px;
-}

frontend/src/container/TracesExplorer/ListView/configs.tsx

@@ -1,4 +1,3 @@
-import type { TelemetryFieldKey } from 'api/v5/v5';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
 
 export const defaultSelectedColumns: string[] = [
@@ -11,9 +10,3 @@ export const defaultSelectedColumns: string[] = [
 ];
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
-
-// Pinned timestamp column
-export const TIMESTAMP_FIELD = {
-	name: 'timestamp',
-	fieldContext: 'span',
-} as TelemetryFieldKey;

frontend/src/container/TracesExplorer/ListView/index.data.test.tsx

@@ -1,133 +0,0 @@
-import { ENVIRONMENT } from 'constants/env';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { render, screen } from 'tests/test-utils';
-
-import ListView from './index';
-
-// globalTime starts with loading:true, which gates the list query. Force just that
-// slice's loading to false so the query fires; every other selector is untouched.
-jest.mock('react-redux', () => {
-	const actual = jest.requireActual('react-redux');
-	return {
-		...actual,
-		useSelector: (selector: (state: unknown) => unknown): unknown => {
-			const result = actual.useSelector(selector);
-			if (result && typeof result === 'object' && 'loading' in result) {
-				return { ...result, loading: false };
-			}
-			return result;
-		},
-	};
-});
-
-// List columns come from the options menu (server-synced preferences). Pin them
-// so the query fires and the expected columns render, independent of that API.
-jest.mock('container/OptionsMenu/useOptionsMenu', () => ({
-	__esModule: true,
-	default: (): unknown => ({
-		options: {
-			selectColumns: [
-				{ name: 'service.name', fieldContext: 'resource' },
-				{ name: 'name', fieldContext: 'span' },
-				{ name: 'duration_nano', fieldContext: 'span' },
-				{ name: 'http_method', fieldContext: 'span' },
-				{ name: 'response_status_code', fieldContext: 'span' },
-			],
-		},
-		config: { addColumn: { onRemove: jest.fn() } },
-	}),
-}));
-
-const BASE_URL = ENVIRONMENT.baseURL;
-const QUERY_RANGE_URL = `${BASE_URL}/api/v5/query_range`;
-
-const listRows = [
-	{
-		timestamp: '2024-07-19T08:39:58.735245Z',
-		data: {
-			'service.name': 'frontend',
-			name: 'HTTP GET',
-			duration_nano: 55306000,
-			http_method: 'GET',
-			response_status_code: '200',
-			span_id: '772c4d29dd9076ac',
-			trace_id: '0000000000000000344ded1387b08a7e',
-		},
-	},
-	{
-		timestamp: '2024-07-19T08:39:59.949129915Z',
-		data: {
-			'service.name': 'demo-app',
-			name: 'authenticate_check_db',
-			duration_nano: 790949390,
-			// empty status fields to assert the "-" cell
-			http_method: '',
-			response_status_code: '',
-			span_id: '5704353737b6778e',
-			trace_id: 'a364a8e15af3e9a8c866e0528db8b637',
-		},
-	},
-];
-
-const listResponse = (rows: unknown[]): Record<string, unknown> => ({
-	data: { type: 'raw', data: { results: [{ queryName: 'A', rows }] } },
-});
-
-const mockSuccess = (rows: unknown[] = listRows): void => {
-	server.use(
-		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(listResponse(rows))),
-		),
-	);
-};
-
-const renderListView = (): ReturnType<typeof render> =>
-	render(
-		<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight: 54 }}>
-			<ListView
-				isFilterApplied={false}
-				setWarning={jest.fn()}
-				setIsLoadingQueries={jest.fn()}
-			/>
-		</VirtuosoMockContext.Provider>,
-		{},
-		{
-			initialRoute: '/traces-explorer',
-			queryBuilderOverrides: {
-				panelType: PANEL_TYPES.LIST,
-				stagedQuery: initialQueriesMap.traces,
-				currentQuery: initialQueriesMap.traces,
-				redirectWithQueryBuilderData: jest.fn(),
-			} as any,
-		},
-	);
-
-describe('Traces ListView - Data Loaded', () => {
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders backend rows in FieldCell format', async () => {
-		mockSuccess();
-		renderListView();
-
-		// plain-text columns
-		await expect(screen.findByText('frontend')).resolves.toBeInTheDocument();
-		expect(screen.getByText('authenticate_check_db')).toBeInTheDocument();
-
-		// duration_nano renders in milliseconds
-		expect(screen.getAllByTestId('duration_nano')[0]).toHaveTextContent(/ms$/);
-
-		// http_method / response_status_code render as badges
-		expect(screen.getAllByTestId('http_method')[0]).toHaveTextContent('GET');
-		expect(screen.getAllByTestId('response_status_code')[0]).toHaveTextContent(
-			'200',
-		);
-
-		// empty status fields render "-"
-		expect(screen.getAllByText('-').length).toBeGreaterThanOrEqual(1);
-	});
-});

frontend/src/container/TracesExplorer/ListView/index.tsx

@@ -12,18 +12,16 @@ import {
 import { useSelector } from 'react-redux';
 import logEvent from 'api/common/logEvent';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
+import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
-import {
-	getFieldColumn,
-	TracesTableRow,
-} from 'container/TracesExplorer/TracesTable/getFieldColumn';
+import { ResizeTable } from 'components/ResizeTable';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
+import NoLogs from 'container/NoLogs/NoLogs';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
 import TraceExplorerControls from 'container/TracesExplorer/Controls';
@@ -34,22 +32,20 @@ import { Pagination } from 'hooks/queryPagination';
 import { getDefaultPaginationConfig } from 'hooks/queryPagination/utils';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { ArrowUp10, Minus } from '@signozhq/icons';
+import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
+import APIError from 'types/api/error';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import {
-	defaultSelectedColumns,
-	PER_PAGE_OPTIONS,
-	TIMESTAMP_FIELD,
-} from './configs';
-import { getTraceLink, transformSpanRows } from './utils';
+import { TracesLoading } from '../TraceLoading/TraceLoading';
+import { defaultSelectedColumns, PER_PAGE_OPTIONS } from './configs';
+import { Container, tableStyles } from './styles';
+import { getListColumns, transformDataWithDate } from './utils';
 
 import './ListView.styles.scss';
 
-import styles from './ListView.module.scss';
-
 interface ListViewProps {
 	isFilterApplied: boolean;
 	setWarning: Dispatch<SetStateAction<Warning | undefined>>;
@@ -97,7 +93,7 @@ function ListView({
 		[stagedQuery, orderBy],
 	);
 
-	// Stable sorted-name signature for the queryKey.
+	// TEMP — remove after traces moves to TanStack table.
 	// - Drag updates selectColumns; raw queryKey would churn on reorder.
 	// - Trace API fetches only listed columns → add/remove must refetch.
 	// - Sorted-name signature: stable on reorder, changes on add/remove.
@@ -190,42 +186,60 @@ function ListView({
 		[queryTableDataResult],
 	);
 
-	const columns = useMemo<TableColumnDef<TracesTableRow>[]>(() => {
-		const fields = [
-			TIMESTAMP_FIELD,
-			...(options?.selectColumns ?? []).filter(
-				(field) => field.name !== TIMESTAMP_FIELD.name,
-			),
-		];
-		return fields.map((field) => getFieldColumn(field));
-	}, [options?.selectColumns]);
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
-	const rows = useMemo(
-		() => transformSpanRows(queryTableData),
+	const columns = useMemo(
+		() =>
+			getListColumns(
+				options?.selectColumns || [],
+				formatTimezoneAdjustedTimestamp,
+			),
+		[options?.selectColumns, formatTimezoneAdjustedTimestamp],
+	);
+
+	const transformedQueryTableData = useMemo(
+		() => transformDataWithDate(queryTableData) || [],
 		[queryTableData],
 	);
 
-	const handleColumnOrderChange = useCallback(
-		(cols: TableColumnDef<TracesTableRow>[]): void => {
-			config?.addColumn?.onReorder(cols.map((c) => c.id));
+	const handleDragColumn = useCallback(
+		(fromIndex: number, toIndex: number): void => {
+			const reordered = [...columns];
+			const [moved] = reordered.splice(fromIndex, 1);
+			reordered.splice(toIndex, 0, moved);
+			// `key` is the composite (fieldContext.name) — disambiguates same-name fields.
+			const orderedIds = reordered
+				.map((c) => String(c.key || ('dataIndex' in c && c.dataIndex) || ''))
+				.filter(Boolean);
+			config?.addColumn?.onReorder(orderedIds);
 		},
-		[config],
+		[columns, config],
 	);
 
 	const handleOrderChange = useCallback((value: string) => {
 		setOrderBy(value);
 	}, []);
 
+	const isDataAbsent =
+		!isLoading &&
+		!isFetching &&
+		!isError &&
+		transformedQueryTableData.length === 0;
+
 	useEffect(() => {
-		if (!isLoading && !isFetching && !isError && rows.length !== 0) {
-			void logEvent('Traces Explorer: Data present', {
+		if (
+			!isLoading &&
+			!isFetching &&
+			!isError &&
+			transformedQueryTableData.length !== 0
+		) {
+			logEvent('Traces Explorer: Data present', {
 				panelType,
 			});
 		}
-	}, [isLoading, isFetching, isError, rows, panelType]);
-
+	}, [isLoading, isFetching, isError, transformedQueryTableData, panelType]);
 	return (
-		<div className={styles.container}>
+		<Container>
 			<div className="trace-explorer-controls">
 				<div className="order-by-container">
 					<div className="order-by-label">
@@ -252,21 +266,33 @@ function ListView({
 				/>
 			</div>
 
-			<TracesTable
-				data={rows}
-				columns={columns}
-				columnStorageKey={LOCALSTORAGE.TRACES_LIST_COLUMNS}
-				panelType="LIST"
-				getRowHref={getTraceLink}
-				isLoading={isLoading}
-				isFetching={isFetching}
-				isError={isError}
-				error={error}
-				isFilterApplied={isFilterApplied}
-				onColumnOrderChange={handleColumnOrderChange}
-				onColumnRemove={config?.addColumn?.onRemove}
-			/>
-		</div>
+			{isError && error && <ErrorInPlace error={error as APIError} />}
+
+			{(isLoading || (isFetching && transformedQueryTableData.length === 0)) && (
+				<TracesLoading />
+			)}
+
+			{isDataAbsent && !isFilterApplied && (
+				<NoLogs dataSource={DataSource.TRACES} />
+			)}
+
+			{isDataAbsent && isFilterApplied && (
+				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="LIST" />
+			)}
+
+			{!isError && transformedQueryTableData.length !== 0 && (
+				<ResizeTable
+					tableLayout="fixed"
+					pagination={false}
+					scroll={{ x: 'max-content' }}
+					loading={isFetching}
+					style={tableStyles}
+					dataSource={transformedQueryTableData}
+					columns={columns}
+					onDragColumn={handleDragColumn}
+				/>
+			)}
+		</Container>
 	);
 }
 

frontend/src/container/TracesExplorer/ListView/utils.tsx

@@ -3,7 +3,6 @@ import type { TableColumnsType as ColumnsType } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
-import type { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
 import { buildCompositeKey } from 'container/OptionsMenu/utils';
@@ -42,23 +41,12 @@ export const transformDataWithDate = (
 	data[0]?.list?.map(({ data, timestamp }) => ({ ...data, date: timestamp })) ||
 	[];
 
-export const getTraceLink = (record: Record<string, unknown>): string => {
-	function readId(value: unknown): string {
-		if (typeof value === 'string' || typeof value === 'number') {
-			return String(value);
-		}
-		return '';
-	}
-
-	const traceId = readId(record.traceID) || readId(record.trace_id);
-	const spanId = readId(record.spanID) || readId(record.span_id);
-
-	return `${ROUTES.TRACE}/${traceId}${formUrlParams({
-		spanId,
+export const getTraceLink = (record: RowData): string =>
+	`${ROUTES.TRACE}/${record.traceID || record.trace_id}${formUrlParams({
+		spanId: record.spanID || record.span_id,
 		levelUp: 0,
 		levelDown: 0,
 	})}`;
-};
 
 export const getListColumns = (
 	selectedColumns: TelemetryFieldKey[],
@@ -148,21 +136,3 @@ export const getListColumns = (
 
 	return [...initialColumns, ...columns];
 };
-
-// Reshapes the query-range list payload into table rows. `id` mirrors span_id so
-// TanStack sees genuine row changes on orderBy toggles instead of falling back to
-// positional ids; `timestamp` is lifted from the wrapping ListItem.
-export const transformSpanRows = (data: QueryDataV3[]): TracesTableRow[] => {
-	const list = data[0]?.list;
-	if (!list) {
-		return [];
-	}
-	return list.map((item) => {
-		const row = item.data as Record<string, unknown>;
-		return {
-			...row,
-			timestamp: item.timestamp,
-			id: row.span_id,
-		};
-	}) as TracesTableRow[];
-};

frontend/src/container/TracesExplorer/TracesTable/FieldCell.tsx

@@ -1,77 +0,0 @@
-import { generatePath, Link } from 'react-router-dom';
-import { Badge } from '@signozhq/ui/badge';
-import TanStackTable from 'components/TanStackTableView';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import ROUTES from 'constants/routes';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
-import { useTimezone } from 'providers/Timezone';
-
-import {
-	DURATION_FIELD_NAMES,
-	STATUS_FIELD_NAMES,
-	TIMESTAMP_FIELD_NAMES,
-	TRACE_ID_FIELD_NAMES,
-} from './constants';
-import { stringifyCellValue } from './utils';
-
-type FieldCellProps = {
-	name: string;
-	value: unknown;
-};
-
-function FieldCell({ name, value }: FieldCellProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	if (TIMESTAMP_FIELD_NAMES.has(name)) {
-		const ts = value as string | number;
-		const formatted =
-			typeof ts === 'string'
-				? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
-				: formatTimezoneAdjustedTimestamp(
-						ts / 1e6,
-						DATE_TIME_FORMATS.ISO_DATETIME_MS,
-					);
-		const text = String(formatted);
-		return <TanStackTable.Text title={text}>{text}</TanStackTable.Text>;
-	}
-
-	if (value === '' || value == null) {
-		return <TanStackTable.Text data-testid={name}>-</TanStackTable.Text>;
-	}
-
-	const text = stringifyCellValue(value);
-
-	if (TRACE_ID_FIELD_NAMES.has(name)) {
-		return (
-			<Link
-				to={generatePath(ROUTES.TRACE_DETAIL, { id: text })}
-				data-testid="trace-id"
-				onClick={(e): void => e.stopPropagation()}
-			>
-				{text}
-			</Link>
-		);
-	}
-
-	if (STATUS_FIELD_NAMES.has(name)) {
-		return (
-			<Badge data-testid={name} color="sakura" variant="outline">
-				{text}
-			</Badge>
-		);
-	}
-
-	if (DURATION_FIELD_NAMES.has(name)) {
-		return (
-			<TanStackTable.Text data-testid={name}>{getMs(text)}ms</TanStackTable.Text>
-		);
-	}
-
-	return (
-		<TanStackTable.Text data-testid={name} title={text}>
-			{text}
-		</TanStackTable.Text>
-	);
-}
-
-export default FieldCell;

frontend/src/container/TracesExplorer/TracesTable/TracesTable.module.scss

@@ -1,26 +0,0 @@
-.tableWrapper {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.tracesTable {
-	--tanstack-table-row-height: 54px;
-	--tanstack-table-header-height: 54px;
-
-	--tanstack-cell-padding-top-override: 5px;
-	--tanstack-cell-padding-bottom-override: 5px;
-	--tanstack-cell-padding-right-override: 15px;
-
-	--tanstack-cell-padding-left-override: 15px;
-	--tanstack-cell-header-padding-left-override: 5px;
-
-	--tanstack-cell-header-padding-left-first-column: 15px;
-
-	--tanstack-plain-body-line-clamp: 1;
-
-	--tanstack-table-cell-bg: var(--l2-background);
-	--tanstack-table-header-cell-bg: var(--l1-background-hover);
-	--tanstack-table-row-hover-bg: var(--l1-background-hover);
-}

frontend/src/container/TracesExplorer/TracesTable/TracesTable.tsx

@@ -1,116 +0,0 @@
-import { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import TanStackTable from 'components/TanStackTableView';
-import type {
-	CellTypographySize,
-	TableColumnDef,
-} from 'components/TanStackTableView/types';
-import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
-import NoLogs from 'container/NoLogs/NoLogs';
-import { TracesLoading } from 'container/TracesExplorer/TraceLoading/TraceLoading';
-import APIError from 'types/api/error';
-import { DataSource, PanelTypeKeys } from 'types/common/queryBuilder';
-import { getAbsoluteUrl } from 'utils/basePath';
-
-import type { TracesTableRow } from './getFieldColumn';
-import styles from './TracesTable.module.scss';
-
-export type TracesTableProps = {
-	data: TracesTableRow[];
-	columns: TableColumnDef<TracesTableRow>[];
-	columnStorageKey?: string;
-	respectColumnOrder?: boolean;
-	panelType: PanelTypeKeys;
-	/** Builds the trace-detail href for a row; drives row click + cmd/ctrl-click. */
-	getRowHref: (row: TracesTableRow) => string;
-	isLoading: boolean;
-	isFetching: boolean;
-	isError: boolean;
-	error: APIError | Error | null;
-	isFilterApplied: boolean;
-	onColumnOrderChange?: (cols: TableColumnDef<TracesTableRow>[]) => void;
-	onColumnRemove?: (columnId: string) => void;
-	cellTypographySize?: CellTypographySize;
-};
-
-function TracesTable({
-	data,
-	columns,
-	columnStorageKey,
-	respectColumnOrder = false,
-	panelType,
-	getRowHref,
-	isLoading,
-	isFetching,
-	isError,
-	error,
-	isFilterApplied,
-	onColumnOrderChange,
-	onColumnRemove,
-	cellTypographySize = 'medium',
-}: TracesTableProps): JSX.Element {
-	const history = useHistory();
-
-	const isDataAbsent =
-		!isLoading && !isFetching && !isError && data.length === 0;
-
-	const handleRowClick = useCallback(
-		(row: TracesTableRow): void => {
-			history.push(getRowHref(row));
-		},
-		[history, getRowHref],
-	);
-
-	const handleRowClickNewTab = useCallback(
-		(row: TracesTableRow): void => {
-			window.open(getAbsoluteUrl(getRowHref(row)), '_blank', 'noopener');
-		},
-		[getRowHref],
-	);
-
-	return (
-		<>
-			{isError && error && <ErrorInPlace error={error as APIError} />}
-
-			{(isLoading || (isFetching && data.length === 0)) && <TracesLoading />}
-
-			{isDataAbsent && !isFilterApplied && (
-				<NoLogs dataSource={DataSource.TRACES} />
-			)}
-
-			{isDataAbsent && isFilterApplied && (
-				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType={panelType} />
-			)}
-
-			{!isError && data.length !== 0 && (
-				<div className={styles.tableWrapper}>
-					<TanStackTable<TracesTableRow>
-						data={data}
-						columns={columns}
-						className={styles.tracesTable}
-						columnStorageKey={columnStorageKey}
-						respectColumnOrder={respectColumnOrder}
-						isLoading={isFetching}
-						cellTypographySize={cellTypographySize}
-						onColumnOrderChange={onColumnOrderChange}
-						onColumnRemove={onColumnRemove}
-						onRowClick={handleRowClick}
-						onRowClickNewTab={handleRowClickNewTab}
-						getRowTestId={(row): string => `traces-table-row-${row.id}`}
-					/>
-				</div>
-			)}
-		</>
-	);
-}
-
-TracesTable.defaultProps = {
-	columnStorageKey: undefined,
-	respectColumnOrder: false,
-	onColumnOrderChange: undefined,
-	onColumnRemove: undefined,
-	cellTypographySize: 'medium',
-};
-
-export default TracesTable;

frontend/src/container/TracesExplorer/TracesTable/constants.ts

@@ -1,18 +0,0 @@
-// Field-name allowlists that drive signal-specific cell rendering. Both legacy
-// camelCase and snake_case variants are listed because the API has shipped both.
-export const TIMESTAMP_FIELD_NAMES = new Set(['timestamp']);
-
-export const STATUS_FIELD_NAMES = new Set([
-	'httpMethod',
-	'http_method',
-	'http.method',
-	'http.request.method',
-	'responseStatusCode',
-	'response_status_code',
-	'http.status_code',
-	'http.response.status_code',
-]);
-
-export const DURATION_FIELD_NAMES = new Set(['durationNano', 'duration_nano']);
-
-export const TRACE_ID_FIELD_NAMES = new Set(['traceID', 'trace_id']);

frontend/src/container/TracesExplorer/TracesTable/getFieldColumn.tsx

@@ -1,26 +0,0 @@
-import { TelemetryFieldKey } from 'api/v5/v5';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-
-import { TIMESTAMP_FIELD_NAMES } from './constants';
-import FieldCell from './FieldCell';
-
-export type TracesTableRow = { id: string } & Record<string, unknown>;
-
-export function getFieldColumn(
-	field: TelemetryFieldKey,
-): TableColumnDef<TracesTableRow> {
-	const { name, fieldContext } = field;
-	const isTimestamp = TIMESTAMP_FIELD_NAMES.has(name);
-
-	return {
-		id: buildCompositeKey(name, fieldContext),
-		header: name,
-		accessorFn: (row): unknown => row[name],
-		enableMove: !isTimestamp,
-		enableRemove: !isTimestamp,
-		canBeHidden: !isTimestamp,
-		width: { min: 192 },
-		cell: ({ value }): JSX.Element => <FieldCell name={name} value={value} />,
-	};
-}

frontend/src/container/TracesExplorer/TracesTable/utils.ts

@@ -1,12 +0,0 @@
-export function stringifyCellValue(value: unknown): string {
-	if (value == null) {
-		return '';
-	}
-	if (typeof value === 'string') {
-		return value;
-	}
-	if (typeof value === 'number' || typeof value === 'boolean') {
-		return String(value);
-	}
-	return JSON.stringify(value);
-}

frontend/src/container/TracesExplorer/TracesView/TracesView.module.scss

@@ -1,15 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-	min-height: 0;
-	// Page chain isn't a flex column, so anchor the virtualized table against the viewport.
-	height: calc(100vh - 240px);
-	min-height: 400px;
-}
-
-.actionsContainer {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}

frontend/src/container/TracesExplorer/TracesView/configs.tsx

@@ -1,25 +1,50 @@
-import { TelemetryFieldKey } from 'api/v5/v5';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import {
-	getFieldColumn,
-	TracesTableRow,
-} from 'container/TracesExplorer/TracesTable/getFieldColumn';
+import { generatePath, Link } from 'react-router-dom';
+import type { TableColumnsType as ColumnsType } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import ROUTES from 'constants/routes';
+import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
+import { ListItem } from 'types/api/widgets/getQuery';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
 
-const TRACE_FIELDS = [
-	{ name: 'service.name', fieldContext: 'resource' },
-	{ name: 'name' },
-	{ name: 'duration_nano' },
-	{ name: 'span_count' },
-	{ name: 'trace_id' },
-] as TelemetryFieldKey[];
-
-export const columns: TableColumnDef<TracesTableRow>[] = TRACE_FIELDS.map(
-	(field) => ({
-		...getFieldColumn(field),
-		enableRemove: false,
-		canBeHidden: false,
-	}),
-);
+export const columns: ColumnsType<ListItem['data']> = [
+	{
+		title: 'Root Service Name',
+		dataIndex: 'service.name',
+		key: 'serviceName',
+	},
+	{
+		title: 'Root Operation Name',
+		dataIndex: 'name',
+		key: 'name',
+	},
+	{
+		title: 'Root Duration (in ms)',
+		dataIndex: 'duration_nano',
+		key: 'durationNano',
+		render: (duration: number): JSX.Element => (
+			<Typography>{getMs(String(duration))}ms</Typography>
+		),
+	},
+	{
+		title: 'No of Spans',
+		dataIndex: 'span_count',
+		key: 'span_count',
+	},
+	{
+		title: 'TraceID',
+		dataIndex: 'trace_id',
+		key: 'traceID',
+		render: (traceID: string): JSX.Element => (
+			<Link
+				to={generatePath(ROUTES.TRACE_DETAIL, {
+					id: traceID,
+				})}
+				data-testid="trace-id"
+			>
+				{traceID}
+			</Link>
+		),
+	},
+];

frontend/src/container/TracesExplorer/TracesView/index.test.tsx

@@ -1,136 +0,0 @@
-import { ENVIRONMENT } from 'constants/env';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { render, screen, waitFor } from 'tests/test-utils';
-
-import TracesView from './index';
-
-const BASE_URL = ENVIRONMENT.baseURL;
-const QUERY_RANGE_URL = `${BASE_URL}/api/v5/query_range`;
-
-const groupedRows = [
-	{
-		timestamp: '2024-07-19T08:39:58.735245Z',
-		data: {
-			'service.name': 'frontend',
-			name: 'HTTP GET',
-			duration_nano: 55306000,
-			span_count: 8,
-			trace_id: '0000000000000000344ded1387b08a7e',
-		},
-	},
-	{
-		timestamp: '2024-07-19T08:39:59.949129915Z',
-		data: {
-			'service.name': 'demo-app',
-			// intentionally empty to assert the "-" cell
-			name: '',
-			duration_nano: 790949390,
-			span_count: 3,
-			trace_id: 'a364a8e15af3e9a8c866e0528db8b637',
-		},
-	},
-];
-
-const groupedResponse = (rows: unknown[]): Record<string, unknown> => ({
-	data: { type: 'trace', data: { results: [{ queryName: 'A', rows }] } },
-});
-
-const mockSuccess = (rows: unknown[] = groupedRows): void => {
-	server.use(
-		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
-			res(ctx.status(200), ctx.json(groupedResponse(rows))),
-		),
-	);
-};
-
-const mockError = (): void => {
-	server.use(
-		rest.post(QUERY_RANGE_URL, (_req, res, ctx) =>
-			res(ctx.status(500), ctx.json({ status: 'error', error: 'boom' })),
-		),
-	);
-};
-
-const renderTracesView = (
-	props: Record<string, unknown> = {},
-): ReturnType<typeof render> =>
-	render(
-		<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight: 54 }}>
-			<TracesView
-				isFilterApplied={false}
-				setWarning={jest.fn()}
-				setIsLoadingQueries={jest.fn()}
-				{...props}
-			/>
-		</VirtuosoMockContext.Provider>,
-		{},
-		{
-			initialRoute: '/traces-explorer',
-			queryBuilderOverrides: {
-				panelType: PANEL_TYPES.TRACE,
-				stagedQuery: initialQueriesMap.traces,
-				currentQuery: initialQueriesMap.traces,
-			} as any,
-		},
-	);
-
-describe('TracesView (grouped root-span table)', () => {
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders backend rows in FieldCell format', async () => {
-		mockSuccess();
-		renderTracesView();
-
-		// service.name + name render as plain text
-		await expect(screen.findByText('frontend')).resolves.toBeInTheDocument();
-		expect(screen.getByText('HTTP GET')).toBeInTheDocument();
-
-		// duration_nano renders in milliseconds
-		expect(screen.getAllByTestId('duration_nano')[0]).toHaveTextContent(/ms$/);
-
-		// span_count renders as text
-		expect(screen.getByText('8')).toBeInTheDocument();
-
-		// empty field renders "-"
-		expect(screen.getAllByText('-').length).toBeGreaterThanOrEqual(1);
-
-		// trace_id renders as a link to the trace detail
-		const traceLinks = screen.getAllByTestId('trace-id');
-		expect(traceLinks[0]).toHaveAttribute(
-			'href',
-			expect.stringContaining('/trace/0000000000000000344ded1387b08a7e'),
-		);
-	});
-
-	it('shows the empty state and keeps the toolbar when there are no rows', async () => {
-		mockSuccess([]);
-		renderTracesView();
-
-		// toolbar (un-gated) stays visible regardless of data
-		expect(
-			screen.getByText(/This tab only shows Root Spans/i),
-		).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
-
-		await waitFor(() => {
-			expect(screen.getByText(/No traces yet/i)).toBeInTheDocument();
-		});
-	});
-
-	it('keeps the toolbar visible on API error', async () => {
-		mockError();
-		renderTracesView();
-
-		expect(
-			screen.getByText(/This tab only shows Root Spans/i),
-		).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
-	});
-});

frontend/src/container/TracesExplorer/TracesView/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 import {
 	Dispatch,
 	memo,
@@ -11,29 +12,30 @@ import { useSelector } from 'react-redux';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
+import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import { ResizeTable } from 'components/ResizeTable';
 import { ENTITY_VERSION_V5 } from 'constants/app';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
+import NoLogs from 'container/NoLogs/NoLogs';
 import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
-import { getTraceLink } from 'container/TracesExplorer/ListView/utils';
-import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
-import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
+import APIError from 'types/api/error';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';
 
 import TraceExplorerControls from '../Controls';
+import { TracesLoading } from '../TraceLoading/TraceLoading';
 import { columns, PER_PAGE_OPTIONS } from './configs';
-
-import styles from './TracesView.module.scss';
+import { ActionsContainer, Container } from './styles';
 
 interface TracesViewProps {
 	isFilterApplied: boolean;
@@ -117,13 +119,8 @@ function TracesView({
 	}, [data?.payload, data?.warning]);
 
 	const responseData = data?.payload?.data?.newResult?.data?.result[0]?.list;
-
-	const rows = useMemo<TracesTableRow[]>(
-		() =>
-			(responseData ?? []).map((item) => {
-				const row = item.data;
-				return { ...row, id: row.trace_id };
-			}) as TracesTableRow[],
+	const tableData = useMemo(
+		() => responseData?.map((listItem) => listItem.data),
 		[responseData],
 	);
 
@@ -136,52 +133,71 @@ function TracesView({
 	}, [isLoading, isFetching, setIsLoadingQueries]);
 
 	useEffect(() => {
-		if (!isLoading && !isFetching && !isError && rows.length !== 0) {
-			void logEvent('Traces Explorer: Data present', {
+		if (!isLoading && !isFetching && !isError && (tableData || []).length !== 0) {
+			logEvent('Traces Explorer: Data present', {
 				panelType: 'TRACE',
 			});
 		}
-	}, [isLoading, isFetching, isError, rows.length]);
+	}, [isLoading, isFetching, isError, panelType, tableData]);
 
 	return (
-		<div className={styles.container}>
-			<div className={styles.actionsContainer}>
-				<Typography>
-					This tab only shows Root Spans. More details
-					<Typography.Link href={DOCLINKS.TRACES_DETAILS_LINK} target="_blank">
-						{' '}
-						here
-					</Typography.Link>
-				</Typography>
+		<Container>
+			{(tableData || []).length !== 0 && (
+				<ActionsContainer>
+					<Typography>
+						This tab only shows Root Spans. More details
+						<Typography.Link href={DOCLINKS.TRACES_DETAILS_LINK} target="_blank">
+							{' '}
+							here
+						</Typography.Link>
+					</Typography>
 
-				<div className="trace-explorer-controls">
-					<DownloadOptionsMenu
-						dataSource={DataSource.TRACES}
-						panelType={PANEL_TYPES.TRACE}
-					/>
+					<div className="trace-explorer-controls">
+						<DownloadOptionsMenu
+							dataSource={DataSource.TRACES}
+							panelType={PANEL_TYPES.TRACE}
+						/>
 
-					<TraceExplorerControls
-						isLoading={isLoading}
-						totalCount={rows.length}
-						perPageOptions={PER_PAGE_OPTIONS}
-					/>
-				</div>
-			</div>
+						<TraceExplorerControls
+							isLoading={isLoading}
+							totalCount={responseData?.length || 0}
+							perPageOptions={PER_PAGE_OPTIONS}
+						/>
+					</div>
+				</ActionsContainer>
+			)}
 
-			<TracesTable
-				data={rows}
-				columns={columns}
-				columnStorageKey={LOCALSTORAGE.TRACES_VIEW_COLUMNS}
-				respectColumnOrder
-				panelType="TRACE"
-				getRowHref={getTraceLink}
-				isLoading={isLoading}
-				isFetching={isFetching}
-				isError={isError}
-				error={error}
-				isFilterApplied={isFilterApplied}
-			/>
-		</div>
+			{isError && error && <ErrorInPlace error={error as APIError} />}
+
+			{(isLoading || (isFetching && (tableData || []).length === 0)) && (
+				<TracesLoading />
+			)}
+
+			{!isLoading &&
+				!isFetching &&
+				!isError &&
+				!isFilterApplied &&
+				(tableData || []).length === 0 && <NoLogs dataSource={DataSource.TRACES} />}
+
+			{!isLoading &&
+				!isFetching &&
+				(tableData || []).length === 0 &&
+				!isError &&
+				isFilterApplied && (
+					<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="TRACE" />
+				)}
+
+			{(tableData || []).length !== 0 && (
+				<ResizeTable
+					loading={isLoading}
+					columns={columns}
+					tableLayout="fixed"
+					dataSource={tableData}
+					scroll={{ x: true }}
+					pagination={false}
+				/>
+			)}
+		</Container>
 	);
 }
 

frontend/src/container/TracesExplorer/TracesView/styles.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+	display: flex;
+	flex-direction: column;
+`;
+
+export const ActionsContainer = styled.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+`;

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -1274,6 +1274,264 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 	}
 }
 
+func TestAreaChartPanelDefaults(t *testing.T) {
+	data := []byte(`{
+		"variables": [],
+		"panels": {
+			"p1": {
+				"kind": "Panel",
+				"spec": {
+					"links": [],
+					"plugin": {
+						"kind": "signoz/AreaChartPanel",
+						"spec": {}
+					},
+					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+				}
+			}
+		},
+		"links": [],
+		"layouts": []
+	}`)
+	d, err := unmarshalDashboard(data)
+	require.NoError(t, err, "unmarshal and validate failed")
+
+	require.IsType(t, &AreaChartPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
+	spec := d.Panels["p1"].Spec.Plugin.Spec.(*AreaChartPanelSpec)
+
+	assert.Equal(t, "solid", spec.ChartAppearance.FillMode.ValueOrDefault(), "area fillMode defaults to solid, where the TimeSeries FillMode defaults to none")
+	assert.Nil(t, spec.ChartAppearance.FillOpacity, "an omitted fillOpacity stays nil so the renderer applies the kind default")
+	assert.Equal(t, "none", spec.Visualization.Stack.ValueOrDefault(), "expected Stack default none")
+	assert.Equal(t, "2", spec.Formatting.DecimalPrecision.ValueOrDefault(), "expected DecimalPrecision default 2")
+	assert.Equal(t, "spline", spec.ChartAppearance.LineInterpolation.ValueOrDefault(), "expected LineInterpolation default spline")
+	assert.Equal(t, "solid", spec.ChartAppearance.LineStyle.ValueOrDefault(), "expected LineStyle default solid")
+	assert.Equal(t, "global_time", spec.Visualization.TimePreference.ValueOrDefault(), "expected TimePreference default global_time")
+	assert.Equal(t, "bottom", spec.Legend.Position.ValueOrDefault(), "expected LegendPosition default bottom")
+	assert.Equal(t, "list", spec.Legend.Mode.ValueOrDefault(), "expected LegendMode default list")
+
+	output, err := json.Marshal(d)
+	require.NoError(t, err, "marshal dashboard failed")
+	outputStr := string(output)
+	for field, want := range map[string]string{
+		"fillMode":    `"solid"`,
+		"stack":       `"none"`,
+		"fillOpacity": `null`,
+	} {
+		assert.Contains(t, outputStr, `"`+field+`":`+want, "expected stored/response JSON to contain %s:%s", field, want)
+	}
+}
+
+func TestAreaChartPanelRoundTrip(t *testing.T) {
+	data := []byte(`{
+		"variables": [],
+		"panels": {
+			"p1": {
+				"kind": "Panel",
+				"spec": {
+					"links": [],
+					"plugin": {
+						"kind": "signoz/AreaChartPanel",
+						"spec": {
+							"visualization": {"timePreference": "global_time", "fillSpans": false, "stack": "percent"},
+							"chartAppearance": {"fillMode": "gradient", "fillOpacity": 0.4}
+						}
+					},
+					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+				}
+			}
+		},
+		"links": [],
+		"layouts": []
+	}`)
+	d, err := unmarshalDashboard(data)
+	require.NoError(t, err, "unmarshal and validate failed")
+
+	require.IsType(t, &AreaChartPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
+	spec := d.Panels["p1"].Spec.Plugin.Spec.(*AreaChartPanelSpec)
+
+	assert.Equal(t, "percent", spec.Visualization.Stack.ValueOrDefault(), "expected stack percent")
+	assert.Equal(t, "gradient", spec.ChartAppearance.FillMode.ValueOrDefault(), "expected fillMode gradient")
+
+	output, err := json.Marshal(d)
+	require.NoError(t, err, "marshal dashboard failed")
+	assert.Contains(t, string(output), `"stack":"percent"`, "expected stack in stored/response JSON")
+	assert.Contains(t, string(output), `"fillMode":"gradient"`, "expected fillMode in stored/response JSON")
+}
+
+func TestAreaChartPanelFillOpacity(t *testing.T) {
+	tests := []struct {
+		scenario                 string
+		chartAppearance          string
+		expectedFillOpacitySet   bool
+		expectedFillOpacityValue FillOpacity
+		expectedMarshalledJSON   string
+	}{
+		{
+			scenario:                 "zero is a set value, not an absent one",
+			chartAppearance:          `{"fillOpacity": 0}`,
+			expectedFillOpacitySet:   true,
+			expectedFillOpacityValue: 0,
+			expectedMarshalledJSON:   `"fillOpacity":0`,
+		},
+		{
+			scenario:                 "fully opaque upper bound",
+			chartAppearance:          `{"fillOpacity": 1}`,
+			expectedFillOpacitySet:   true,
+			expectedFillOpacityValue: 1,
+			expectedMarshalledJSON:   `"fillOpacity":1`,
+		},
+		{
+			scenario:                 "typical fractional value",
+			chartAppearance:          `{"fillOpacity": 0.4}`,
+			expectedFillOpacitySet:   true,
+			expectedFillOpacityValue: 0.4,
+			expectedMarshalledJSON:   `"fillOpacity":0.4`,
+		},
+		{
+			scenario:                 "precision beyond one decimal place survives",
+			chartAppearance:          `{"fillOpacity": 0.125}`,
+			expectedFillOpacitySet:   true,
+			expectedFillOpacityValue: 0.125,
+			expectedMarshalledJSON:   `"fillOpacity":0.125`,
+		},
+		{
+			scenario:               "omitted field stays nil so the renderer applies the kind default",
+			chartAppearance:        `{}`,
+			expectedFillOpacitySet: false,
+			expectedMarshalledJSON: `"fillOpacity":null`,
+		},
+		{
+			scenario:               "explicit null stays nil rather than decoding as zero",
+			chartAppearance:        `{"fillOpacity": null}`,
+			expectedFillOpacitySet: false,
+			expectedMarshalledJSON: `"fillOpacity":null`,
+		},
+	}
+
+	for _, test := range tests {
+		t.Run(test.scenario, func(t *testing.T) {
+			data := []byte(`{
+				"variables": [],
+				"panels": {
+					"p1": {
+						"kind": "Panel",
+						"spec": {
+							"links": [],
+							"plugin": {"kind": "signoz/AreaChartPanel", "spec": {"chartAppearance": ` + test.chartAppearance + `}},
+							"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+						}
+					}
+				},
+				"links": [],
+				"layouts": []
+			}`)
+			d, err := unmarshalDashboard(data)
+			require.NoError(t, err, "unmarshal and validate failed")
+
+			require.IsType(t, &AreaChartPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
+			spec := d.Panels["p1"].Spec.Plugin.Spec.(*AreaChartPanelSpec)
+
+			if !test.expectedFillOpacitySet {
+				assert.Nil(t, spec.ChartAppearance.FillOpacity, "expected fillOpacity to stay unset")
+			} else {
+				require.NotNil(t, spec.ChartAppearance.FillOpacity, "expected fillOpacity to decode as a set value")
+				assert.Equal(t, test.expectedFillOpacityValue, *spec.ChartAppearance.FillOpacity, "unexpected decoded fillOpacity")
+			}
+
+			output, err := json.Marshal(d)
+			require.NoError(t, err, "marshal dashboard failed")
+			assert.Contains(t, string(output), test.expectedMarshalledJSON, "unexpected fillOpacity in stored/response JSON")
+		})
+	}
+}
+
+func TestInvalidateAreaChartPanelSpecValues(t *testing.T) {
+	tests := []struct {
+		scenario               string
+		panelKind              string
+		panelSpec              string
+		expectedErrorSubstring string
+	}{
+		{
+			scenario:               "unknown stack mode",
+			panelKind:              "signoz/AreaChartPanel",
+			panelSpec:              `{"visualization": {"stack": "stacked"}}`,
+			expectedErrorSubstring: "stack mode",
+		},
+		{
+			scenario:               "unknown area fill mode",
+			panelKind:              "signoz/AreaChartPanel",
+			panelSpec:              `{"chartAppearance": {"fillMode": "striped"}}`,
+			expectedErrorSubstring: "fill mode",
+		},
+		{
+			scenario:               "fill opacity on a 0-100 scale",
+			panelKind:              "signoz/AreaChartPanel",
+			panelSpec:              `{"chartAppearance": {"fillOpacity": 40}}`,
+			expectedErrorSubstring: "invalid fillOpacity 40: must be between 0 and 1",
+		},
+		{
+			scenario:               "negative fill opacity",
+			panelKind:              "signoz/AreaChartPanel",
+			panelSpec:              `{"chartAppearance": {"fillOpacity": -0.5}}`,
+			expectedErrorSubstring: "invalid fillOpacity -0.5: must be between 0 and 1",
+		},
+		{
+			scenario:               "non-numeric fill opacity",
+			panelKind:              "signoz/AreaChartPanel",
+			panelSpec:              `{"chartAppearance": {"fillOpacity": "0.4"}}`,
+			expectedErrorSubstring: "cannot unmarshal string",
+		},
+		{
+			scenario:               "stack on a time series panel",
+			panelKind:              "signoz/TimeSeriesPanel",
+			panelSpec:              `{"visualization": {"stack": "normal"}}`,
+			expectedErrorSubstring: `unknown field`,
+		},
+		{
+			scenario:               "fill opacity on a time series panel",
+			panelKind:              "signoz/TimeSeriesPanel",
+			panelSpec:              `{"chartAppearance": {"fillOpacity": 0.4}}`,
+			expectedErrorSubstring: `unknown field`,
+		},
+		{
+			scenario:               "stacked bar chart on an area panel",
+			panelKind:              "signoz/AreaChartPanel",
+			panelSpec:              `{"visualization": {"stackedBarChart": true}}`,
+			expectedErrorSubstring: `unknown field`,
+		},
+		{
+			scenario:               "stack on a bar chart panel",
+			panelKind:              "signoz/BarChartPanel",
+			panelSpec:              `{"visualization": {"stack": "percent"}}`,
+			expectedErrorSubstring: `unknown field`,
+		},
+	}
+
+	for _, test := range tests {
+		t.Run(test.scenario, func(t *testing.T) {
+			data := []byte(`{
+				"variables": [],
+				"panels": {
+					"p1": {
+						"kind": "Panel",
+						"spec": {
+							"links": [],
+							"plugin": {"kind": "` + test.panelKind + `", "spec": ` + test.panelSpec + `},
+							"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+						}
+					}
+				},
+				"links": [],
+				"layouts": []
+			}`)
+			_, err := unmarshalDashboard(data)
+			require.Error(t, err, "expected the spec to be rejected")
+			assert.Contains(t, err.Error(), test.expectedErrorSubstring, "unexpected error message: %s", err.Error())
+		})
+	}
+}
+
 func TestNumberPanelDefaults(t *testing.T) {
 	data := []byte(`{
 		"variables": [],

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -30,6 +30,7 @@ func (PanelPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
 	return markDiscriminator(s, "kind", map[string]string{
 		string(PanelKindTimeSeries): schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec"),
 		string(PanelKindBarChart):   schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec"),
+		string(PanelKindAreaChart):  schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec"),
 		string(PanelKindNumber):     schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec"),
 		string(PanelKindPieChart):   schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec"),
 		string(PanelKindTable):      schemaRef("DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec"),
@@ -60,6 +61,7 @@ func (PanelPlugin) JSONSchemaOneOf() []any {
 	return []any{
 		PanelPluginVariant[TimeSeriesPanelSpec]{Kind: string(PanelKindTimeSeries)},
 		PanelPluginVariant[BarChartPanelSpec]{Kind: string(PanelKindBarChart)},
+		PanelPluginVariant[AreaChartPanelSpec]{Kind: string(PanelKindAreaChart)},
 		PanelPluginVariant[NumberPanelSpec]{Kind: string(PanelKindNumber)},
 		PanelPluginVariant[PieChartPanelSpec]{Kind: string(PanelKindPieChart)},
 		PanelPluginVariant[TablePanelSpec]{Kind: string(PanelKindTable)},
@@ -223,6 +225,7 @@ var (
 	panelPluginSpecs = map[PanelPluginKind]func() any{
 		PanelKindTimeSeries: func() any { return new(TimeSeriesPanelSpec) },
 		PanelKindBarChart:   func() any { return new(BarChartPanelSpec) },
+		PanelKindAreaChart:  func() any { return new(AreaChartPanelSpec) },
 		PanelKindNumber:     func() any { return new(NumberPanelSpec) },
 		PanelKindPieChart:   func() any { return new(PieChartPanelSpec) },
 		PanelKindTable:      func() any { return new(TablePanelSpec) },
@@ -245,6 +248,7 @@ var (
 	allowedQueryKinds = map[PanelPluginKind][]QueryPluginKind{
 		PanelKindTimeSeries: {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
 		PanelKindBarChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindAreaChart:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
 		PanelKindNumber:     {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
 		PanelKindHistogram:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
 		PanelKindPieChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},

pkg/types/dashboardtypes/perses_public_dashboard.go

@@ -183,7 +183,8 @@ func (d *DashboardV2) GetPanelQuery(startTime, endTime uint64, panelKey string)
 		return nil, err
 	}
 
-	// fillGaps lives on the panel visualization; only timeseries and bar chart carry it.
+	// fillGaps lives on the panel visualization; only timeseries, bar chart and
+	// area chart carry it.
 	fillGaps := false
 	switch panelSpec := panel.Spec.Plugin.Spec.(type) {
 	case *TimeSeriesPanelSpec:
@@ -194,6 +195,10 @@ func (d *DashboardV2) GetPanelQuery(startTime, endTime uint64, panelKey string)
 		if panelSpec != nil {
 			fillGaps = panelSpec.Visualization.FillSpans
 		}
+	case *AreaChartPanelSpec:
+		if panelSpec != nil {
+			fillGaps = panelSpec.Visualization.FillSpans
+		}
 	}
 
 	return &qb.QueryRangeRequest{

pkg/types/dashboardtypes/perses_signoz_plugins.go

@@ -168,6 +168,7 @@ type PanelPluginKind string
 const (
 	PanelKindTimeSeries PanelPluginKind = "signoz/TimeSeriesPanel"
 	PanelKindBarChart   PanelPluginKind = "signoz/BarChartPanel"
+	PanelKindAreaChart  PanelPluginKind = "signoz/AreaChartPanel"
 	PanelKindNumber     PanelPluginKind = "signoz/NumberPanel"
 	PanelKindPieChart   PanelPluginKind = "signoz/PieChartPanel"
 	PanelKindTable      PanelPluginKind = "signoz/TablePanel"
@@ -176,7 +177,7 @@ const (
 )
 
 func (PanelPluginKind) Enum() []any {
-	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList}
+	return []any{PanelKindTimeSeries, PanelKindBarChart, PanelKindAreaChart, PanelKindNumber, PanelKindPieChart, PanelKindTable, PanelKindHistogram, PanelKindList}
 }
 
 type TimeSeriesPanelSpec struct {
@@ -204,6 +205,30 @@ type BarChartPanelSpec struct {
 	Thresholds    []ThresholdWithLabel  `json:"thresholds" validate:"dive"`
 }
 
+type AreaChartPanelSpec struct {
+	Visualization   AreaChartVisualization `json:"visualization"`
+	Formatting      PanelFormatting        `json:"formatting"`
+	ChartAppearance AreaChartAppearance    `json:"chartAppearance"`
+	Axes            Axes                   `json:"axes"`
+	Legend          Legend                 `json:"legend"`
+	Thresholds      []ThresholdWithLabel   `json:"thresholds" validate:"dive"`
+}
+
+// AreaChartAppearance repeats the line-drawing fields rather than embedding
+// TimeSeriesChartAppearance: both carry a `fillMode` under different enums, and
+// a duplicated json tag across an embed boundary is resolved by depth, which the
+// schema reflector does not model.
+type AreaChartAppearance struct {
+	LineInterpolation LineInterpolation `json:"lineInterpolation"`
+	ShowPoints        bool              `json:"showPoints"`
+	LineStyle         LineStyle         `json:"lineStyle"`
+	FillMode          AreaFillMode      `json:"fillMode"`
+	// FillOpacity is a pointer so an omitted field resolves to the kind default at
+	// render time; a plain value would make the Go zero value a transparent fill.
+	FillOpacity *FillOpacity `json:"fillOpacity"`
+	SpanGaps    SpanGaps     `json:"spanGaps"`
+}
+
 type NumberPanelSpec struct {
 	Visualization BasicVisualization    `json:"visualization"`
 	Formatting    PanelFormatting       `json:"formatting"`
@@ -262,6 +287,12 @@ type BarChartVisualization struct {
 	StackedBarChart bool `json:"stackedBarChart"`
 }
 
+type AreaChartVisualization struct {
+	BasicVisualization
+	FillSpans bool      `json:"fillSpans"`
+	Stack     StackMode `json:"stack"`
+}
+
 type PanelFormatting struct {
 	Unit             string          `json:"unit"`
 	DecimalPrecision PrecisionOption `json:"decimalPrecision"`
@@ -622,6 +653,106 @@ func (fm *FillMode) UnmarshalJSON(data []byte) error {
 	}
 }
 
+type AreaFillMode struct{ valuer.String }
+
+var (
+	AreaFillModeSolid    = AreaFillMode{valuer.NewString("solid")} // default
+	AreaFillModeGradient = AreaFillMode{valuer.NewString("gradient")}
+)
+
+func (AreaFillMode) Enum() []any {
+	return []any{AreaFillModeSolid, AreaFillModeGradient}
+}
+
+func (fm AreaFillMode) ValueOrDefault() string {
+	if fm.IsZero() {
+		return AreaFillModeSolid.StringValue()
+	}
+	return fm.StringValue()
+}
+
+func (fm AreaFillMode) MarshalJSON() ([]byte, error) {
+	return json.Marshal(fm.ValueOrDefault())
+}
+
+func (fm *AreaFillMode) UnmarshalJSON(data []byte) error {
+	var v string
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid fill mode: must be a string, one of `solid`, `gradient`, or `none`")
+	}
+	val := AreaFillMode{valuer.NewString(v)}
+	switch val {
+	case AreaFillModeSolid, AreaFillModeGradient:
+		*fm = val
+		return nil
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid fill mode %q: must be `solid`, `gradient`, or `none`", v)
+	}
+}
+
+// StackMode is area-only. Bar stacking stays on BarChartVisualization.StackedBarChart,
+// so `percent` is not reachable from a bar panel.
+type StackMode struct{ valuer.String }
+
+var (
+	StackModeNone    = StackMode{valuer.NewString("none")} // default
+	StackModeNormal  = StackMode{valuer.NewString("normal")}
+	StackModePercent = StackMode{valuer.NewString("percent")}
+)
+
+func (StackMode) Enum() []any {
+	return []any{StackModeNone, StackModeNormal, StackModePercent}
+}
+
+func (sm StackMode) ValueOrDefault() string {
+	if sm.IsZero() {
+		return StackModeNone.StringValue()
+	}
+	return sm.StringValue()
+}
+
+func (sm StackMode) MarshalJSON() ([]byte, error) {
+	return json.Marshal(sm.ValueOrDefault())
+}
+
+func (sm *StackMode) UnmarshalJSON(data []byte) error {
+	var v string
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid stack mode: must be a string, one of `none`, `normal`, or `percent`")
+	}
+	val := StackMode{valuer.NewString(v)}
+	switch val {
+	case StackModeNone, StackModeNormal, StackModePercent:
+		*sm = val
+		return nil
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid stack mode %q: must be `none`, `normal`, or `percent`", v)
+	}
+}
+
+// FillOpacity is the alpha of an area fill, in 0–1 because that is what the
+// chart layer consumes directly. Unlike the enums in this section it has no
+// ValueOrDefault: 0 is a legitimate value, so the kind default lives at render
+// time behind a nil pointer.
+type FillOpacity float64
+
+func (FillOpacity) PrepareJSONSchema(s *jsonschema.Schema) error {
+	s.WithMinimum(0).WithMaximum(1)
+	return nil
+}
+
+func (o *FillOpacity) UnmarshalJSON(data []byte) error {
+	var v float64
+	if err := json.Unmarshal(data, &v); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid fillOpacity: must be a number between 0 and 1")
+	}
+	if v < 0 || v > 1 {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "invalid fillOpacity %v: must be between 0 and 1", v)
+	}
+	*o = FillOpacity(v)
+	return nil
+}
+
 type SpanGaps struct {
 	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  string `json:"fillLessThan" description:"The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected."`

pkg/types/dashboardtypes/perses_v1_to_v2.go

@@ -14,6 +14,11 @@ import (
 // (transition.dashboardMigrateV5). Pre-v5 builder queries will produce
 // invalid v2 envelopes — run the v4→v5 migration first.
 //
+// The v1 input shape is closed: nothing writes v1 dashboards any more, so these
+// files only ever convert what v1 could already express. Panel kinds and spec
+// fields added to v2 from here on need no converter entry — change these files
+// only when a v2 type edit breaks the build.
+//
 // The conversion is split across sibling files by concern:
 //   - perses_v1_to_v2_tags.go      tags
 //   - perses_v1_to_v2_panels.go    widgets → panels (+ panel field mappers)