fix: failing test

* feat: added section in panel settings

* chore: minor changes

* fix: fixed failing tests

* fix: minor style fixes

* chore: updated the categorisation

* chore: updated styles

* chore: minor styles improvements

* chore: formatting unit section fix

frontend/__mocks__/resizableMock.tsx

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from 'react';
+
+type CommonProps = PropsWithChildren<{
+	className?: string;
+	minSize?: number;
+	maxSize?: number;
+	defaultSize?: number;
+	direction?: 'horizontal' | 'vertical';
+	autoSaveId?: string;
+	withHandle?: boolean;
+}>;
+
+export function ResizablePanelGroup({
+	children,
+	className,
+}: CommonProps): JSX.Element {
+	return <div className={className}>{children}</div>;
+}
+
+export function ResizablePanel({
+	children,
+	className,
+}: CommonProps): JSX.Element {
+	return <div className={className}>{children}</div>;
+}
+
+export function ResizableHandle({ className }: CommonProps): JSX.Element {
+	return <div className={className} />;
+}

frontend/jest.config.ts

@@ -14,6 +14,7 @@ const config: Config.InitialOptions = {
 		'\\.(css|less|scss)$': '<rootDir>/__mocks__/cssMock.ts',
 		'\\.md$': '<rootDir>/__mocks__/cssMock.ts',
 		'^uplot$': '<rootDir>/__mocks__/uplotMock.ts',
+		'^@signozhq/resizable$': '<rootDir>/__mocks__/resizableMock.tsx',
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,

frontend/package.json

@@ -64,7 +64,7 @@
     "@signozhq/sonner": "0.1.0",
     "@signozhq/switch": "0.0.2",
     "@signozhq/table": "0.3.7",
-    "@signozhq/toggle-group": "^0.0.1",
+    "@signozhq/toggle-group": "0.0.1",
     "@signozhq/tooltip": "0.0.2",
     "@tanstack/react-table": "8.20.6",
     "@tanstack/react-virtual": "3.11.2",

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/__tests__/utils.test.ts

@@ -224,7 +224,7 @@ describe('TimeSeriesPanel utils', () => {
 			});
 		});
 
-		it('uses DrawStyle.Line and VisibilityMode.Never when series has multiple valid points', () => {
+		it('uses DrawStyle.Line and showPoints false when series has multiple valid points', () => {
 			const apiResponse = createApiResponse([
 				{
 					metric: {},

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -10,9 +10,9 @@ import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import {
 	DrawStyle,
+	FillMode,
 	LineInterpolation,
 	LineStyle,
-	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { isInvalidPlotValue } from 'lib/uPlotV2/utils/dataUtils';
@@ -124,12 +124,12 @@ export const prepareUPlotConfig = ({
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
 			spanGaps: true,
-			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
-			showPoints: hasSingleValidPoint
-				? VisibilityMode.Always
-				: VisibilityMode.Never,
+			lineStyle: widget.lineStyle || LineStyle.Solid,
+			lineInterpolation: widget.lineInterpolation || LineInterpolation.Spline,
+			showPoints:
+				widget.showPoints || hasSingleValidPoint ? true : !!widget.showPoints,
 			pointSize: 5,
+			fillMode: widget.fillMode || FillMode.None,
 			isDarkMode,
 		});
 	});

frontend/src/container/NewWidget/NewWidget.styles.scss

@@ -65,6 +65,22 @@
 	}
 }
 
+.new-widget-container {
+	.resizable-panel-left-container {
+		overflow-x: hidden;
+		overflow-y: auto;
+	}
+
+	.resizable-panel-right-container {
+		overflow-y: auto;
+		min-width: 350px;
+	}
+
+	.widget-resizable-handle {
+		height: 100vh;
+	}
+}
+
 .lightMode {
 	.edit-header {
 		border-bottom: 1px solid var(--bg-vanilla-300);

frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.styles.scss

@@ -1,5 +1,7 @@
 .column-unit-selector {
-	margin-top: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
 
 	.heading {
 		color: var(--bg-vanilla-400);
@@ -30,6 +32,11 @@
 			width: 100%;
 		}
 	}
+	&-content {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
 }
 
 .lightMode {

frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx

@@ -72,22 +72,24 @@ export function ColumnUnitSelector(
 	return (
 		<section className="column-unit-selector">
 			<Typography.Text className="heading">Column Units</Typography.Text>
-			{aggregationQueries.map(({ value, label }) => {
-				const baseQueryName = value.split('.')[0];
-				return (
-					<YAxisUnitSelectorV2
-						value={columnUnits[value] || ''}
-						onSelect={(unitValue: string): void =>
-							handleColumnUnitSelect(value, unitValue)
-						}
-						fieldLabel={label}
-						key={value}
-						selectedQueryName={baseQueryName}
-						// Update the column unit value automatically only in create mode
-						shouldUpdateYAxisUnit={isNewDashboard}
-					/>
-				);
-			})}
+			<div className="column-unit-selector-content">
+				{aggregationQueries.map(({ value, label }) => {
+					const baseQueryName = value.split('.')[0];
+					return (
+						<YAxisUnitSelectorV2
+							value={columnUnits[value] || ''}
+							onSelect={(unitValue: string): void =>
+								handleColumnUnitSelect(value, unitValue)
+							}
+							fieldLabel={label}
+							key={value}
+							selectedQueryName={baseQueryName}
+							// Update the column unit value automatically only in create mode
+							shouldUpdateYAxisUnit={isNewDashboard}
+						/>
+					);
+				})}
+			</div>
 		</section>
 	);
 }

frontend/src/container/NewWidget/RightContainer/ContextLinks/__test__/ContextLinks.test.tsx

@@ -56,9 +56,6 @@ describe('ContextLinks Component', () => {
 				/>,
 			);
 
-			// Check that the component renders
-			expect(screen.getByText('Context Links')).toBeInTheDocument();
-
 			// Check that the add button is present
 			expect(
 				screen.getByRole('button', { name: /context link/i }),

frontend/src/container/NewWidget/RightContainer/ContextLinks/index.tsx

@@ -14,7 +14,7 @@ import {
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Button, Modal, Typography } from 'antd';
+import { Button, Modal } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical, Pencil, Plus, Trash2 } from 'lucide-react';
 import {
@@ -134,11 +134,16 @@ function ContextLinks({
 
 	return (
 		<div className="context-links-container">
-			<Typography.Text className="context-links-text">
-				Context Links
-			</Typography.Text>
-
 			<div className="context-links-list">
+				<Button
+					type="default"
+					className="add-context-link-button"
+					icon={<Plus size={12} />}
+					style={{ width: '100%' }}
+					onClick={handleAddContextLink}
+				>
+					Add Context Link
+				</Button>
 				<OverlayScrollbar>
 					<DndContext
 						sensors={sensors}
@@ -160,16 +165,6 @@ function ContextLinks({
 						</SortableContext>
 					</DndContext>
 				</OverlayScrollbar>
-
-				{/* button to add context link */}
-				<Button
-					type="primary"
-					className="add-context-link-button"
-					icon={<Plus size={12} />}
-					onClick={handleAddContextLink}
-				>
-					Context Link
-				</Button>
 			</div>
 
 			<Modal

frontend/src/container/NewWidget/RightContainer/ContextLinks/styles.scss

@@ -2,7 +2,6 @@
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
-	margin: 12px;
 }
 
 .context-links-text {
@@ -110,10 +109,7 @@
 }
 
 .add-context-link-button {
-	display: flex;
-	align-items: center;
-	margin: auto;
-	width: fit-content;
+	width: 100%;
 }
 
 .lightMode {

frontend/src/container/NewWidget/RightContainer/FillModeSelector.styles.scss

@@ -0,0 +1,21 @@
+.fill-mode-selector {
+	.fill-mode-icon {
+		width: 24px;
+		height: 24px;
+	}
+
+	.fill-mode-label {
+		text-transform: uppercase;
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--bg-vanilla-400);
+	}
+}
+
+.lightMode {
+	.fill-mode-selector {
+		.fill-mode-label {
+			color: var(--bg-ink-400);
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/FillModeSelector.tsx

@@ -0,0 +1,94 @@
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Typography } from 'antd';
+import { FillMode } from 'lib/uPlotV2/config/types';
+
+import './FillModeSelector.styles.scss';
+
+interface FillModeSelectorProps {
+	value: FillMode;
+	onChange: (value: FillMode) => void;
+}
+
+export function FillModeSelector({
+	value,
+	onChange,
+}: FillModeSelectorProps): JSX.Element {
+	return (
+		<section className="fill-mode-selector control-container">
+			<Typography.Text className="section-heading">Fill mode</Typography.Text>
+			<ToggleGroup
+				type="single"
+				value={value}
+				variant="outline"
+				size="lg"
+				onValueChange={(newValue): void => {
+					if (newValue) {
+						onChange(newValue as FillMode);
+					}
+				}}
+			>
+				<ToggleGroupItem value={FillMode.None} aria-label="None" title="None">
+					<svg
+						className="fill-mode-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<rect x="8" y="16" width="32" height="16" stroke="#888" fill="none" />
+					</svg>
+					<Typography.Text className="section-heading-small">None</Typography.Text>
+				</ToggleGroupItem>
+				<ToggleGroupItem value={FillMode.Solid} aria-label="Solid" title="Solid">
+					<svg
+						className="fill-mode-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<rect x="8" y="16" width="32" height="16" fill="#888" />
+					</svg>
+					<Typography.Text className="section-heading-small">Solid</Typography.Text>
+				</ToggleGroupItem>
+				<ToggleGroupItem
+					value={FillMode.Gradient}
+					aria-label="Gradient"
+					title="Gradient"
+				>
+					<svg
+						className="fill-mode-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<defs>
+							<linearGradient id="fill-gradient" x1="0" y1="0" x2="1" y2="0">
+								<stop offset="0%" stopColor="#888" stopOpacity="0.2" />
+								<stop offset="100%" stopColor="#888" stopOpacity="0.8" />
+							</linearGradient>
+						</defs>
+						<rect
+							x="8"
+							y="16"
+							width="32"
+							height="16"
+							fill="url(#fill-gradient)"
+							stroke="#888"
+						/>
+					</svg>
+					<Typography.Text className="section-heading-small">
+						Gradient
+					</Typography.Text>
+				</ToggleGroupItem>
+			</ToggleGroup>
+		</section>
+	);
+}

frontend/src/container/NewWidget/RightContainer/LineInterpolationSelector.styles.scss

@@ -0,0 +1,21 @@
+.line-interpolation-selector {
+	.line-interpolation-icon {
+		width: 24px;
+		height: 24px;
+	}
+
+	.line-interpolation-label {
+		text-transform: uppercase;
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--bg-vanilla-400);
+	}
+}
+
+.lightMode {
+	.line-interpolation-selector {
+		.line-interpolation-label {
+			color: var(--bg-ink-400);
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/LineInterpolationSelector.tsx

@@ -0,0 +1,110 @@
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Typography } from 'antd';
+import { LineInterpolation } from 'lib/uPlotV2/config/types';
+
+import './LineInterpolationSelector.styles.scss';
+
+interface LineInterpolationSelectorProps {
+	value: LineInterpolation;
+	onChange: (value: LineInterpolation) => void;
+}
+
+export function LineInterpolationSelector({
+	value,
+	onChange,
+}: LineInterpolationSelectorProps): JSX.Element {
+	return (
+		<section className="line-interpolation-selector control-container">
+			<Typography.Text className="section-heading">
+				Line interpolation
+			</Typography.Text>
+			<ToggleGroup
+				type="single"
+				value={value}
+				variant="outline"
+				size="lg"
+				onValueChange={(newValue): void => {
+					if (newValue) {
+						onChange(newValue as LineInterpolation);
+					}
+				}}
+			>
+				<ToggleGroupItem
+					value={LineInterpolation.Linear}
+					aria-label="Linear"
+					title="Linear"
+				>
+					<svg
+						className="line-interpolation-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="8" cy="32" r="3" fill="#888" />
+						<circle cx="24" cy="16" r="3" fill="#888" />
+						<circle cx="40" cy="32" r="3" fill="#888" />
+						<path d="M8 32 L24 16 L40 32" stroke="#888" />
+					</svg>
+				</ToggleGroupItem>
+				<ToggleGroupItem value={LineInterpolation.Spline} aria-label="Spline">
+					<svg
+						className="line-interpolation-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="8" cy="32" r="3" fill="#888" />
+						<circle cx="24" cy="16" r="3" fill="#888" />
+						<circle cx="40" cy="32" r="3" fill="#888" />
+						<path d="M8 32 C16 8, 32 8, 40 32" />
+					</svg>
+				</ToggleGroupItem>
+				<ToggleGroupItem
+					value={LineInterpolation.StepAfter}
+					aria-label="Step After"
+				>
+					<svg
+						className="line-interpolation-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="8" cy="32" r="3" fill="#888" />
+						<circle cx="24" cy="16" r="3" fill="#888" />
+						<circle cx="40" cy="32" r="3" fill="#888" />
+						<path d="M8 32 V16 H24 V32 H40" />
+					</svg>
+				</ToggleGroupItem>
+
+				<ToggleGroupItem
+					value={LineInterpolation.StepBefore}
+					aria-label="Step Before"
+				>
+					<svg
+						className="line-interpolation-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="8" cy="32" r="3" fill="#888" />
+						<circle cx="24" cy="16" r="3" fill="#888" />
+						<circle cx="40" cy="32" r="3" fill="#888" />
+						<path d="M8 32 H24 V16 H40 V32" />
+					</svg>
+				</ToggleGroupItem>
+			</ToggleGroup>
+		</section>
+	);
+}

frontend/src/container/NewWidget/RightContainer/LineStyleSelector.styles.scss

@@ -0,0 +1,21 @@
+.line-style-selector {
+	.line-style-icon {
+		width: 24px;
+		height: 24px;
+	}
+
+	.line-style-label {
+		text-transform: uppercase;
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--bg-vanilla-400);
+	}
+}
+
+.lightMode {
+	.line-style-selector {
+		.line-style-label {
+			color: var(--bg-ink-400);
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/LineStyleSelector.tsx

@@ -0,0 +1,66 @@
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Typography } from 'antd';
+import { LineStyle } from 'lib/uPlotV2/config/types';
+
+import './LineStyleSelector.styles.scss';
+
+interface LineStyleSelectorProps {
+	value: LineStyle;
+	onChange: (value: LineStyle) => void;
+}
+
+export function LineStyleSelector({
+	value,
+	onChange,
+}: LineStyleSelectorProps): JSX.Element {
+	return (
+		<section className="line-style-selector control-container">
+			<Typography.Text className="section-heading">Line style</Typography.Text>
+			<ToggleGroup
+				type="single"
+				value={value}
+				variant="outline"
+				size="lg"
+				onValueChange={(newValue): void => {
+					if (newValue) {
+						onChange(newValue as LineStyle);
+					}
+				}}
+			>
+				<ToggleGroupItem value={LineStyle.Solid} aria-label="Solid" title="Solid">
+					<svg
+						className="line-style-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<path d="M8 24 L40 24" />
+					</svg>
+					<Typography.Text className="section-heading-small">Solid</Typography.Text>
+				</ToggleGroupItem>
+				<ToggleGroupItem
+					value={LineStyle.Dashed}
+					aria-label="Dashed"
+					title="Dashed"
+				>
+					<svg
+						className="line-style-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						strokeDasharray="6 4"
+					>
+						<path d="M8 24 L40 24" />
+					</svg>
+					<Typography.Text className="section-heading-small">Dashed</Typography.Text>
+				</ToggleGroupItem>
+			</ToggleGroup>
+		</section>
+	);
+}

frontend/src/container/NewWidget/RightContainer/RightContainer.styles.scss

@@ -1,6 +1,28 @@
 .right-container {
 	display: flex;
 	flex-direction: column;
+	font-family: 'Space Mono';
+
+	.section-heading {
+		color: var(--bg-vanilla-400);
+		font-size: 13px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 18px; /* 138.462% */
+		letter-spacing: 0.52px;
+		text-transform: uppercase;
+	}
+
+	.section-heading-small {
+		font-family: 'Space Mono';
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 400;
+		word-break: initial;
+		line-height: 16px; /* 133.333% */
+		letter-spacing: 0.48px;
+	}
 
 	.header {
 		display: flex;
@@ -24,25 +46,14 @@
 			letter-spacing: -0.07px;
 		}
 	}
-
-	.name-description {
+	.control-container {
 		display: flex;
 		flex-direction: column;
-		padding: 12px 12px 16px 12px;
-		border-top: 1px solid var(--bg-slate-500);
-		border-bottom: 1px solid var(--bg-slate-500);
 		gap: 8px;
+	}
 
-		.typography {
-			color: var(--bg-vanilla-400);
-			font-family: 'Space Mono';
-			font-size: 13px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 138.462% */
-			letter-spacing: 0.52px;
-			text-transform: uppercase;
-		}
+	.name-description {
+		padding: 0 0 4px 0;
 
 		.name-input {
 			display: flex;
@@ -88,22 +99,26 @@
 	.panel-config {
 		display: flex;
 		flex-direction: column;
-		padding: 12px 12px 16px 12px;
-		gap: 8px;
-		border-bottom: 1px solid var(--bg-slate-500);
 
-		.typography {
-			color: var(--bg-vanilla-400);
-			font-family: 'Space Mono';
-			font-size: 13px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 138.462% */
-			letter-spacing: 0.52px;
-			text-transform: uppercase;
+		.toggle-card {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+			padding: 12px;
+			border-radius: 2px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-400);
+		}
+
+		.toggle-card-text-container {
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
 		}
 
 		.panel-type-select {
+			width: 100%;
 			.ant-select-selector {
 				display: flex;
 				height: 32px;
@@ -115,98 +130,32 @@
 				border: 1px solid var(--bg-slate-400);
 				background: var(--bg-ink-300);
 			}
-
-			.select-option {
-				display: flex;
-				align-items: center;
-				gap: 6px;
-				.icon {
-					display: flex;
-					align-items: center;
-				}
-
-				.display {
-					color: var(--bg-vanilla-100);
-					font-family: Inter;
-					font-size: 12px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 16px; /* 133.333% */
-				}
-			}
 		}
 
-		.fill-gaps {
-			margin-top: 16px;
-			display: flex;
-			padding: 12px;
-			justify-content: space-between;
-			align-items: center;
-			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-400);
-
-			.fill-gaps-text {
-				color: var(--bg-vanilla-400);
-				font-family: 'Space Mono';
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 138.462% */
-				letter-spacing: 0.52px;
-				text-transform: uppercase;
-			}
+		.toggle-card-description {
+			color: var(--bg-vanilla-400);
+			font-family: Inter;
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			opacity: 0.6;
+			line-height: 16px; /* 133.333% */
 		}
 
 		.log-scale,
-		.decimal-precision-selector {
-			margin-top: 16px;
-			display: flex;
-			justify-content: space-between;
-			flex-direction: column;
-			gap: 8px;
-		}
-
+		.decimal-precision-selector,
 		.legend-position {
-			margin-top: 16px;
-			display: flex;
 			justify-content: space-between;
-			flex-direction: column;
-			gap: 8px;
-		}
-
-		.legend-colors {
-			margin-top: 16px;
-		}
-
-		.panel-time-text {
-			margin-top: 16px;
-			color: var(--bg-vanilla-400);
-			font-family: 'Space Mono';
-			font-size: 13px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 138.462% */
-			letter-spacing: 0.52px;
-			text-transform: uppercase;
 		}
 
 		.y-axis-unit-selector,
 		.y-axis-unit-selector-v2 {
-			margin-top: 16px;
 			display: flex;
 			flex-direction: column;
 			gap: 8px;
 
 			.heading {
-				color: var(--bg-vanilla-400);
-				font-family: 'Space Mono';
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 138.462% */
-				letter-spacing: 0.52px;
-				text-transform: uppercase;
+				@extend .section-heading;
 			}
 
 			.input {
@@ -259,7 +208,6 @@
 
 				.text {
 					color: var(--bg-vanilla-400);
-					font-family: 'Space Mono';
 					font-size: 12px;
 					font-style: normal;
 					font-weight: 400;
@@ -278,40 +226,11 @@
 		}
 
 		.stack-chart {
-			margin-top: 16px;
-			display: flex;
+			flex-direction: row;
 			justify-content: space-between;
-			gap: 8px;
-
-			.label {
-				color: var(--bg-vanilla-400);
-				font-family: 'Space Mono';
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 138.462% */
-				letter-spacing: 0.52px;
-				text-transform: uppercase;
-			}
 		}
 
 		.bucket-config {
-			margin-top: 16px;
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-
-			.label {
-				color: var(--bg-vanilla-400);
-				font-family: 'Space Mono';
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 138.462% */
-				letter-spacing: 0.52px;
-				text-transform: uppercase;
-			}
-
 			.bucket-size-label {
 				margin-top: 8px;
 			}
@@ -340,7 +259,6 @@
 
 				.label {
 					color: var(--bg-vanilla-400);
-					font-family: 'Space Mono';
 					font-size: 13px;
 					font-style: normal;
 					font-weight: 400;
@@ -352,16 +270,13 @@
 		}
 	}
 
-	.context-links {
-		border-bottom: 1px solid var(--bg-slate-500);
-	}
-
 	.alerts {
 		display: flex;
-		padding: 12px;
 		align-items: center;
 		justify-content: space-between;
-		border-bottom: 1px solid var(--bg-slate-500);
+		padding: 12px;
+		min-height: 44px;
+		border-top: 1px solid var(--bg-slate-500);
 		cursor: pointer;
 
 		.left-section {
@@ -375,7 +290,6 @@
 
 			.alerts-text {
 				color: var(--bg-vanilla-400);
-				font-family: Inter;
 				font-size: 14px;
 				font-style: normal;
 				font-weight: 400;
@@ -387,6 +301,16 @@
 			color: var(--bg-vanilla-400);
 		}
 	}
+
+	.context-links {
+		padding: 12px 12px 16px 12px;
+		border-bottom: 1px solid var(--bg-slate-500);
+	}
+
+	.thresholds-section {
+		padding: 12px 12px 16px 12px;
+		border-top: 1px solid var(--bg-slate-500);
+	}
 }
 
 .select-option {
@@ -411,6 +335,9 @@
 .lightMode {
 	.right-container {
 		background-color: var(--bg-vanilla-100);
+		.section-heading {
+			color: var(--bg-ink-400);
+		}
 		.header {
 			.header-text {
 				color: var(--bg-ink-400);
@@ -418,9 +345,6 @@
 		}
 
 		.name-description {
-			border-top: 1px solid var(--bg-vanilla-300);
-			border-bottom: 1px solid var(--bg-vanilla-300);
-
 			.typography {
 				color: var(--bg-ink-400);
 			}
@@ -441,12 +365,6 @@
 		}
 
 		.panel-config {
-			border-bottom: 1px solid var(--bg-vanilla-300);
-
-			.typography {
-				color: var(--bg-ink-400);
-			}
-
 			.panel-type-select {
 				.ant-select-selector {
 					border: 1px solid var(--bg-vanilla-300);
@@ -471,13 +389,16 @@
 				}
 			}
 
-			.fill-gaps {
+			.toggle-card {
 				border: 1px solid var(--bg-vanilla-300);
 				background: var(--bg-vanilla-300);
 
 				.fill-gaps-text {
 					color: var(--bg-ink-400);
 				}
+				.toggle-card-description {
+					color: var(--bg-ink-400);
+				}
 			}
 
 			.bucket-config {
@@ -530,7 +451,7 @@
 		}
 
 		.alerts {
-			border-bottom: 1px solid var(--bg-vanilla-300);
+			border-top: 1px solid var(--bg-vanilla-300);
 
 			.left-section {
 				.bell-icon {
@@ -549,6 +470,10 @@
 		.context-links {
 			border-bottom: 1px solid var(--bg-vanilla-300);
 		}
+
+		.thresholds-section {
+			border-top: 1px solid var(--bg-vanilla-300);
+		}
 	}
 
 	.select-option {

frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.styles.scss

@@ -1,5 +1,4 @@
 .threshold-selector-container {
-	padding: 12px;
 	padding-bottom: 80px;
 
 	.threshold-select {

frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.tsx

@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { Typography } from 'antd';
+import { Button } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryLabels } from 'hooks/useGetQueryLabels';
-import { Antenna, Plus } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { v4 as uuid } from 'uuid';
 
 import Threshold from './Threshold';
@@ -68,11 +68,14 @@ function ThresholdSelector({
 		<DndProvider backend={HTML5Backend}>
 			<div className="threshold-selector-container">
 				<div className="threshold-select" onClick={addThresholdHandler}>
-					<div className="left-section">
-						<Antenna size={14} className="icon" />
-						<Typography.Text className="text">Thresholds</Typography.Text>
-					</div>
-					<Plus size={14} onClick={addThresholdHandler} className="icon" />
+					<Button
+						type="default"
+						icon={<Plus size={14} />}
+						style={{ width: '100%' }}
+						onClick={addThresholdHandler}
+					>
+						Add Threshold
+					</Button>
 				</div>
 				{thresholds.map((threshold, idx) => (
 					<Threshold

frontend/src/container/NewWidget/RightContainer/__tests__/RightContainer.test.tsx

@@ -6,6 +6,11 @@ import { MemoryRouter } from 'react-router-dom';
 import { render as rtlRender, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	FillMode,
+	LineInterpolation,
+	LineStyle,
+} from 'lib/uPlotV2/config/types';
 import { AppContext } from 'providers/App/App';
 import { IAppContext } from 'providers/App/types';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
@@ -165,6 +170,14 @@ describe('RightContainer - Alerts Section', () => {
 		setContextLinks: jest.fn(),
 		enableDrillDown: false,
 		isNewDashboard: false,
+		lineInterpolation: LineInterpolation.Spline,
+		fillMode: FillMode.None,
+		lineStyle: LineStyle.Solid,
+		setLineInterpolation: jest.fn(),
+		setFillMode: jest.fn(),
+		setLineStyle: jest.fn(),
+		showPoints: false,
+		setShowPoints: jest.fn(),
 	};
 
 	beforeEach(() => {

frontend/src/container/NewWidget/RightContainer/components/SettingsSection/SettingsSection.styles.scss

@@ -0,0 +1,68 @@
+.settings-section {
+	border-top: 1px solid var(--bg-slate-500);
+}
+
+.settings-section-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	padding: 12px 12px;
+	min-height: 44px;
+	background: transparent;
+	border: none;
+	outline: none;
+	cursor: pointer;
+
+	.settings-section-title {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		color: var(--bg-vanilla-400);
+		font-family: 'Space Mono';
+		font-size: 13px;
+		font-weight: 400;
+		text-transform: uppercase;
+	}
+
+	.chevron-icon {
+		color: var(--bg-vanilla-400);
+		transition: transform 0.2s ease-in-out;
+
+		&.open {
+			transform: rotate(180deg);
+		}
+	}
+}
+
+.settings-section-content {
+	padding: 0 12px 0 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	max-height: 0;
+	overflow: hidden;
+	opacity: 0;
+	transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
+
+	&.open {
+		padding-bottom: 24px;
+		max-height: 1000px;
+		opacity: 1;
+	}
+}
+
+.lightMode {
+	.settings-section-header {
+		.chevron-icon {
+			color: var(--bg-ink-400);
+		}
+		.settings-section-title {
+			color: var(--bg-ink-400);
+		}
+	}
+
+	.settings-section {
+		border-top: 1px solid var(--bg-vanilla-300);
+	}
+}

frontend/src/container/NewWidget/RightContainer/components/SettingsSection/SettingsSection.tsx

@@ -0,0 +1,51 @@
+import { ReactNode, useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+
+import './SettingsSection.styles.scss';
+
+export interface SettingsSectionProps {
+	title: string;
+	defaultOpen?: boolean;
+	children: ReactNode;
+	icon?: ReactNode;
+}
+
+function SettingsSection({
+	title,
+	defaultOpen = false,
+	children,
+	icon,
+}: SettingsSectionProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+
+	const toggleOpen = (): void => {
+		setIsOpen((prev) => !prev);
+	};
+
+	return (
+		<section className="settings-section">
+			<button
+				type="button"
+				className="settings-section-header"
+				onClick={toggleOpen}
+			>
+				<span className="settings-section-title">
+					{icon ? icon : null} {title}
+				</span>
+				<ChevronDown
+					size={16}
+					className={isOpen ? 'chevron-icon open' : 'chevron-icon'}
+				/>
+			</button>
+			<div
+				className={
+					isOpen ? 'settings-section-content open' : 'settings-section-content'
+				}
+			>
+				{children}
+			</div>
+		</section>
+	);
+}
+
+export default SettingsSection;

frontend/src/container/NewWidget/RightContainer/constants.ts

@@ -206,3 +206,59 @@ export const panelTypeVsDecimalPrecision: {
 	[PANEL_TYPES.TRACE]: false,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
 } as const;
+
+export const panelTypeVsLineInterpolation: {
+	[key in PANEL_TYPES]: boolean;
+} = {
+	[PANEL_TYPES.TIME_SERIES]: true,
+	[PANEL_TYPES.VALUE]: false,
+	[PANEL_TYPES.TABLE]: false,
+	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.PIE]: false,
+	[PANEL_TYPES.BAR]: false,
+	[PANEL_TYPES.HISTOGRAM]: false,
+	[PANEL_TYPES.TRACE]: false,
+	[PANEL_TYPES.EMPTY_WIDGET]: false,
+} as const;
+
+export const panelTypeVsLineStyle: {
+	[key in PANEL_TYPES]: boolean;
+} = {
+	[PANEL_TYPES.TIME_SERIES]: true,
+	[PANEL_TYPES.VALUE]: false,
+	[PANEL_TYPES.TABLE]: false,
+	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.PIE]: false,
+	[PANEL_TYPES.BAR]: false,
+	[PANEL_TYPES.HISTOGRAM]: false,
+	[PANEL_TYPES.TRACE]: false,
+	[PANEL_TYPES.EMPTY_WIDGET]: false,
+} as const;
+
+export const panelTypeVsFillMode: {
+	[key in PANEL_TYPES]: boolean;
+} = {
+	[PANEL_TYPES.TIME_SERIES]: true,
+	[PANEL_TYPES.VALUE]: false,
+	[PANEL_TYPES.TABLE]: false,
+	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.PIE]: false,
+	[PANEL_TYPES.BAR]: false,
+	[PANEL_TYPES.HISTOGRAM]: false,
+	[PANEL_TYPES.TRACE]: false,
+	[PANEL_TYPES.EMPTY_WIDGET]: false,
+} as const;
+
+export const panelTypeVsShowPoints: {
+	[key in PANEL_TYPES]: boolean;
+} = {
+	[PANEL_TYPES.TIME_SERIES]: true,
+	[PANEL_TYPES.VALUE]: false,
+	[PANEL_TYPES.TABLE]: false,
+	[PANEL_TYPES.LIST]: false,
+	[PANEL_TYPES.PIE]: false,
+	[PANEL_TYPES.BAR]: false,
+	[PANEL_TYPES.HISTOGRAM]: false,
+	[PANEL_TYPES.TRACE]: false,
+	[PANEL_TYPES.EMPTY_WIDGET]: false,
+} as const;

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -14,7 +14,6 @@ import {
 	Input,
 	InputNumber,
 	Select,
-	Space,
 	Switch,
 	Typography,
 } from 'antd';
@@ -28,9 +27,22 @@ import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
+	FillMode,
+	LineInterpolation,
+	LineStyle,
+} from 'lib/uPlotV2/config/types';
+import {
+	Antenna,
+	Axis3D,
 	ConciergeBell,
+	Layers,
+	LayoutDashboard,
 	LineChart,
+	Link,
+	Paintbrush,
+	Pencil,
 	Plus,
+	SlidersHorizontal,
 	Spline,
 	SquareArrowOutUpRight,
 } from 'lucide-react';
@@ -46,17 +58,22 @@ import { DataSource } from 'types/common/queryBuilder';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { ColumnUnitSelector } from './ColumnUnitSelector/ColumnUnitSelector';
+import SettingsSection from './components/SettingsSection/SettingsSection';
 import {
 	panelTypeVsBucketConfig,
 	panelTypeVsColumnUnitPreferences,
 	panelTypeVsContextLinks,
 	panelTypeVsCreateAlert,
 	panelTypeVsDecimalPrecision,
+	panelTypeVsFillMode,
 	panelTypeVsFillSpan,
 	panelTypeVsLegendColors,
 	panelTypeVsLegendPosition,
+	panelTypeVsLineInterpolation,
+	panelTypeVsLineStyle,
 	panelTypeVsLogScale,
 	panelTypeVsPanelTimePreferences,
+	panelTypeVsShowPoints,
 	panelTypeVsSoftMinMax,
 	panelTypeVsStackingChartPreferences,
 	panelTypeVsThreshold,
@@ -64,7 +81,10 @@ import {
 } from './constants';
 import ContextLinks from './ContextLinks';
 import DashboardYAxisUnitSelectorWrapper from './DashboardYAxisUnitSelectorWrapper';
+import { FillModeSelector } from './FillModeSelector';
 import LegendColors from './LegendColors/LegendColors';
+import { LineInterpolationSelector } from './LineInterpolationSelector';
+import { LineStyleSelector } from './LineStyleSelector';
 import ThresholdSelector from './Threshold/ThresholdSelector';
 import { ThresholdProps } from './Threshold/types';
 import { timePreferance } from './timeItems';
@@ -91,6 +111,14 @@ function RightContainer({
 	setTitle,
 	title,
 	selectedGraph,
+	lineInterpolation,
+	setLineInterpolation,
+	fillMode,
+	setFillMode,
+	lineStyle,
+	setLineStyle,
+	showPoints,
+	setShowPoints,
 	bucketCount,
 	bucketWidth,
 	stackedBarChart,
@@ -167,6 +195,11 @@ function RightContainer({
 		panelTypeVsContextLinks[selectedGraph] && enableDrillDown;
 	const allowDecimalPrecision = panelTypeVsDecimalPrecision[selectedGraph];
 
+	const allowLineInterpolation = panelTypeVsLineInterpolation[selectedGraph];
+	const allowLineStyle = panelTypeVsLineStyle[selectedGraph];
+	const allowFillMode = panelTypeVsFillMode[selectedGraph];
+	const allowShowPoints = panelTypeVsShowPoints[selectedGraph];
+
 	const { currentQuery } = useQueryBuilder();
 
 	const [graphTypes, setGraphTypes] = useState<ItemsProps[]>(GraphTypes);
@@ -178,6 +211,37 @@ function RightContainer({
 		}));
 	}, [dashboardVariables]);
 
+	const isAxisSectionVisible = useMemo(() => allowSoftMinMax || allowLogScale, [
+		allowSoftMinMax,
+		allowLogScale,
+	]);
+
+	const isFormattingSectionVisible = useMemo(
+		() => allowYAxisUnit || allowDecimalPrecision || allowPanelColumnPreference,
+		[allowYAxisUnit, allowDecimalPrecision, allowPanelColumnPreference],
+	);
+
+	const isLegendSectionVisible = useMemo(
+		() => allowLegendPosition || allowLegendColors,
+		[allowLegendPosition, allowLegendColors],
+	);
+
+	const isChartAppearanceSectionVisible = useMemo(
+		() =>
+			/**
+			 * Disabled for now as we are not done with other settings in chart appearance section
+			 * TODO: @ahrefabhi Enable this after we are done other settings in chart appearance section
+			 */
+
+			// eslint-disable-next-line sonarjs/no-redundant-boolean
+			false &&
+			(allowFillMode ||
+				allowLineStyle ||
+				allowLineInterpolation ||
+				allowShowPoints),
+		[allowFillMode, allowLineStyle, allowLineInterpolation, allowShowPoints],
+	);
+
 	const updateCursorAndDropdown = (value: string, pos: number): void => {
 		setCursorPos(pos);
 		const lastDollar = value.lastIndexOf('$', pos - 1);
@@ -193,6 +257,15 @@ function RightContainer({
 		}, 0);
 	};
 
+	const decimapPrecisionOptions = useMemo(() => {
+		return [
+			{ label: '0 decimals', value: PrecisionOptionsEnum.ZERO },
+			{ label: '1 decimal', value: PrecisionOptionsEnum.ONE },
+			{ label: '2 decimals', value: PrecisionOptionsEnum.TWO },
+			{ label: '3 decimals', value: PrecisionOptionsEnum.THREE },
+		];
+	}, []);
+
 	const handleInputCursor = (): void => {
 		const pos = inputRef.current?.input?.selectionStart ?? 0;
 		updateCursorAndDropdown(inputValue, pos);
@@ -263,269 +336,333 @@ function RightContainer({
 		<div className="right-container">
 			<section className="header">
 				<div className="purple-dot" />
-				<Typography.Text className="header-text">Panel details</Typography.Text>
+				<Typography.Text className="header-text">Panel Settings</Typography.Text>
 			</section>
-			<section className="name-description">
-				<Typography.Text className="typography">Name</Typography.Text>
-				<AutoComplete
-					options={dashboardVariableOptions}
-					value={inputValue}
-					onChange={onInputChange}
-					onSelect={onSelect}
-					filterOption={filterOption}
-					style={{ width: '100%' }}
-					getPopupContainer={popupContainer}
-					placeholder="Enter the panel name here..."
-					open={autoCompleteOpen}
-				>
-					<Input
-						rootClassName="name-input"
-						ref={inputRef}
-						onSelect={handleInputCursor}
-						onClick={handleInputCursor}
-						onBlur={(): void => setAutoCompleteOpen(false)}
-					/>
-				</AutoComplete>
-				<Typography.Text className="typography">Description</Typography.Text>
-				<TextArea
-					placeholder="Enter the panel description here..."
-					bordered
-					allowClear
-					value={description}
-					onChange={(event): void =>
-						onChangeHandler(setDescription, event.target.value)
-					}
-					rootClassName="description-input"
-				/>
-			</section>
-			<section className="panel-config">
-				<Typography.Text className="typography">Panel Type</Typography.Text>
-				<Select
-					onChange={setGraphHandler}
-					value={selectedGraph}
-					style={{ width: '100%' }}
-					className="panel-type-select"
-					data-testid="panel-change-select"
-					data-stacking-state={stackedBarChart ? 'true' : 'false'}
-				>
-					{graphTypes.map((item) => (
-						<Option key={item.name} value={item.name}>
-							<div className="select-option">
-								<div className="icon">{item.icon}</div>
-								<Typography.Text className="display">{item.display}</Typography.Text>
-							</div>
-						</Option>
-					))}
-				</Select>
 
-				{allowFillSpans && (
-					<Space className="fill-gaps">
-						<Typography className="fill-gaps-text">Fill gaps</Typography>
-						<Switch
-							checked={isFillSpans}
-							size="small"
-							onChange={(checked): void => setIsFillSpans(checked)}
+			<SettingsSection title="General" defaultOpen icon={<Pencil size={14} />}>
+				<section className="name-description control-container">
+					<Typography.Text className="section-heading">Name</Typography.Text>
+					<AutoComplete
+						options={dashboardVariableOptions}
+						value={inputValue}
+						onChange={onInputChange}
+						onSelect={onSelect}
+						filterOption={filterOption}
+						style={{ width: '100%' }}
+						getPopupContainer={popupContainer}
+						placeholder="Enter the panel name here..."
+						open={autoCompleteOpen}
+					>
+						<Input
+							rootClassName="name-input"
+							ref={inputRef}
+							onSelect={handleInputCursor}
+							onClick={handleInputCursor}
+							onBlur={(): void => setAutoCompleteOpen(false)}
 						/>
-					</Space>
-				)}
-
-				{allowPanelTimePreference && (
-					<>
-						<Typography.Text className="panel-time-text">
-							Panel Time Preference
-						</Typography.Text>
-						<TimePreference
-							{...{
-								selectedTime,
-								setSelectedTime,
-							}}
-						/>
-					</>
-				)}
-
-				{allowPanelColumnPreference && (
-					<ColumnUnitSelector
-						columnUnits={columnUnits}
-						setColumnUnits={setColumnUnits}
-						isNewDashboard={isNewDashboard}
-					/>
-				)}
-
-				{allowYAxisUnit && (
-					<DashboardYAxisUnitSelectorWrapper
-						onSelect={setYAxisUnit}
-						value={yAxisUnit || ''}
-						fieldLabel={
-							selectedGraphType === PanelDisplay.VALUE ||
-							selectedGraphType === PanelDisplay.PIE
-								? 'Unit'
-								: 'Y Axis Unit'
+					</AutoComplete>
+					<Typography.Text className="section-heading">Description</Typography.Text>
+					<TextArea
+						placeholder="Enter the panel description here..."
+						bordered
+						allowClear
+						value={description}
+						onChange={(event): void =>
+							onChangeHandler(setDescription, event.target.value)
 						}
-						// Only update the y-axis unit value automatically in create mode
-						shouldUpdateYAxisUnit={isNewDashboard}
+						rootClassName="description-input"
 					/>
-				)}
+				</section>
+			</SettingsSection>
 
-				{allowDecimalPrecision && (
-					<section className="decimal-precision-selector">
-						<Typography.Text className="typography">
-							Decimal Precision
-						</Typography.Text>
+			<section className="panel-config">
+				<SettingsSection
+					title="Visualization"
+					defaultOpen
+					icon={<LayoutDashboard size={14} />}
+				>
+					<section className="panel-type control-container">
+						<Typography.Text className="section-heading">Panel Type</Typography.Text>
 						<Select
-							options={[
-								{ label: '0 decimals', value: PrecisionOptionsEnum.ZERO },
-								{ label: '1 decimal', value: PrecisionOptionsEnum.ONE },
-								{ label: '2 decimals', value: PrecisionOptionsEnum.TWO },
-								{ label: '3 decimals', value: PrecisionOptionsEnum.THREE },
-								{ label: '4 decimals', value: PrecisionOptionsEnum.FOUR },
-								{ label: 'Full Precision', value: PrecisionOptionsEnum.FULL },
-							]}
-							value={decimalPrecision}
-							style={{ width: '100%' }}
+							onChange={setGraphHandler}
+							value={selectedGraph}
 							className="panel-type-select"
-							defaultValue={PrecisionOptionsEnum.TWO}
-							onChange={(val: PrecisionOption): void => setDecimalPrecision(val)}
-						/>
+							data-testid="panel-change-select"
+							data-stacking-state={stackedBarChart ? 'true' : 'false'}
+						>
+							{graphTypes.map((item) => (
+								<Option key={item.name} value={item.name}>
+									<div className="select-option">
+										<div className="icon">{item.icon}</div>
+										<Typography.Text className="display">{item.display}</Typography.Text>
+									</div>
+								</Option>
+							))}
+						</Select>
 					</section>
-				)}
 
-				{allowSoftMinMax && (
-					<section className="soft-min-max">
-						<section className="container">
-							<Typography.Text className="text">Soft Min</Typography.Text>
-							<InputNumber
-								type="number"
-								value={softMin}
-								onChange={softMinHandler}
-								rootClassName="input"
+					{allowPanelTimePreference && (
+						<section className="panel-time-preference control-container">
+							<Typography.Text className="section-heading">
+								Panel Time Preference
+							</Typography.Text>
+							<TimePreference
+								{...{
+									selectedTime,
+									setSelectedTime,
+								}}
 							/>
 						</section>
-						<section className="container">
-							<Typography.Text className="text">Soft Max</Typography.Text>
-							<InputNumber
-								value={softMax}
-								type="number"
-								rootClassName="input"
-								onChange={softMaxHandler}
+					)}
+
+					{allowStackingBarChart && (
+						<section className="stack-chart control-container">
+							<Typography.Text className="section-heading">
+								Stack series
+							</Typography.Text>
+							<Switch
+								checked={stackedBarChart}
+								size="small"
+								onChange={(checked): void => setStackedBarChart(checked)}
 							/>
 						</section>
-					</section>
+					)}
+
+					{allowFillSpans && (
+						<section className="fill-gaps toggle-card">
+							<div className="toggle-card-text-container">
+								<Typography className="section-heading">Fill gaps</Typography>
+								<Typography.Text className="toggle-card-description">
+									Fill gaps in data with 0 for continuity
+								</Typography.Text>
+							</div>
+							<Switch
+								checked={isFillSpans}
+								size="small"
+								onChange={(checked): void => setIsFillSpans(checked)}
+							/>
+						</section>
+					)}
+				</SettingsSection>
+
+				{isFormattingSectionVisible && (
+					<SettingsSection
+						title="Formatting & Units"
+						icon={<SlidersHorizontal size={14} />}
+					>
+						{allowYAxisUnit && (
+							<DashboardYAxisUnitSelectorWrapper
+								onSelect={setYAxisUnit}
+								value={yAxisUnit || ''}
+								fieldLabel={
+									selectedGraphType === PanelDisplay.VALUE ||
+									selectedGraphType === PanelDisplay.PIE
+										? 'Unit'
+										: 'Y Axis Unit'
+								}
+								// Only update the y-axis unit value automatically in create mode
+								shouldUpdateYAxisUnit={isNewDashboard}
+							/>
+						)}
+
+						{allowDecimalPrecision && (
+							<section className="decimal-precision-selector control-container">
+								<Typography.Text className="typography">
+									Decimal Precision
+								</Typography.Text>
+								<Select
+									options={decimapPrecisionOptions}
+									value={decimalPrecision}
+									style={{ width: '100%' }}
+									className="panel-type-select"
+									defaultValue={PrecisionOptionsEnum.TWO}
+									onChange={(val: PrecisionOption): void => setDecimalPrecision(val)}
+								/>
+							</section>
+						)}
+
+						{allowPanelColumnPreference && (
+							<ColumnUnitSelector
+								columnUnits={columnUnits}
+								setColumnUnits={setColumnUnits}
+								isNewDashboard={isNewDashboard}
+							/>
+						)}
+					</SettingsSection>
 				)}
 
-				{allowStackingBarChart && (
-					<section className="stack-chart">
-						<Typography.Text className="label">Stack series</Typography.Text>
-						<Switch
-							checked={stackedBarChart}
-							size="small"
-							onChange={(checked): void => setStackedBarChart(checked)}
-						/>
-					</section>
+				{isChartAppearanceSectionVisible && (
+					<SettingsSection title="Chart Appearance" icon={<Paintbrush size={14} />}>
+						{allowFillMode && (
+							<FillModeSelector value={fillMode} onChange={setFillMode} />
+						)}
+						{allowLineStyle && (
+							<LineStyleSelector value={lineStyle} onChange={setLineStyle} />
+						)}
+						{allowLineInterpolation && (
+							<LineInterpolationSelector
+								value={lineInterpolation}
+								onChange={setLineInterpolation}
+							/>
+						)}
+						{allowShowPoints && (
+							<section className="show-points toggle-card">
+								<div className="toggle-card-text-container">
+									<Typography.Text className="section-heading">
+										Show points
+									</Typography.Text>
+									<Typography.Text className="toggle-card-description">
+										Display individual data points on the chart
+									</Typography.Text>
+								</div>
+								<Switch size="small" checked={showPoints} onChange={setShowPoints} />
+							</section>
+						)}
+					</SettingsSection>
+				)}
+
+				{isAxisSectionVisible && (
+					<SettingsSection title="Axes" icon={<Axis3D size={14} />}>
+						{allowSoftMinMax && (
+							<section className="soft-min-max">
+								<section className="container">
+									<Typography.Text className="text">Soft Min</Typography.Text>
+									<InputNumber
+										type="number"
+										value={softMin}
+										onChange={softMinHandler}
+										rootClassName="input"
+									/>
+								</section>
+								<section className="container">
+									<Typography.Text className="text">Soft Max</Typography.Text>
+									<InputNumber
+										value={softMax}
+										type="number"
+										rootClassName="input"
+										onChange={softMaxHandler}
+									/>
+								</section>
+							</section>
+						)}
+
+						{allowLogScale && (
+							<section className="log-scale control-container">
+								<Typography.Text className="section-heading">
+									Y Axis Scale
+								</Typography.Text>
+								<Select
+									onChange={(value): void =>
+										setIsLogScale(value === LogScale.LOGARITHMIC)
+									}
+									value={isLogScale ? LogScale.LOGARITHMIC : LogScale.LINEAR}
+									style={{ width: '100%' }}
+									className="panel-type-select"
+									defaultValue={LogScale.LINEAR}
+								>
+									<Option value={LogScale.LINEAR}>
+										<div className="select-option">
+											<div className="icon">
+												<LineChart size={16} />
+											</div>
+											<Typography.Text className="display">Linear</Typography.Text>
+										</div>
+									</Option>
+									<Option value={LogScale.LOGARITHMIC}>
+										<div className="select-option">
+											<div className="icon">
+												<Spline size={16} />
+											</div>
+											<Typography.Text className="display">Logarithmic</Typography.Text>
+										</div>
+									</Option>
+								</Select>
+							</section>
+						)}
+					</SettingsSection>
+				)}
+
+				{isLegendSectionVisible && (
+					<SettingsSection title="Legend" icon={<Layers size={14} />}>
+						{allowLegendPosition && (
+							<section className="legend-position control-container">
+								<Typography.Text className="section-heading">Position</Typography.Text>
+								<Select
+									onChange={(value: LegendPosition): void => setLegendPosition(value)}
+									value={legendPosition}
+									style={{ width: '100%' }}
+									className="panel-type-select"
+									defaultValue={LegendPosition.BOTTOM}
+								>
+									<Option value={LegendPosition.BOTTOM}>
+										<div className="select-option">
+											<Typography.Text className="display">Bottom</Typography.Text>
+										</div>
+									</Option>
+									<Option value={LegendPosition.RIGHT}>
+										<div className="select-option">
+											<Typography.Text className="display">Right</Typography.Text>
+										</div>
+									</Option>
+								</Select>
+							</section>
+						)}
+
+						{allowLegendColors && (
+							<section className="legend-colors">
+								<LegendColors
+									customLegendColors={customLegendColors}
+									setCustomLegendColors={setCustomLegendColors}
+									queryResponse={queryResponse}
+								/>
+							</section>
+						)}
+					</SettingsSection>
 				)}
 
 				{allowBucketConfig && (
-					<section className="bucket-config">
-						<Typography.Text className="label">Number of buckets</Typography.Text>
-						<InputNumber
-							value={bucketCount || null}
-							type="number"
-							min={0}
-							rootClassName="bucket-input"
-							placeholder="Default: 30"
-							onChange={(val): void => {
-								setBucketCount(val || 0);
-							}}
-						/>
-						<Typography.Text className="label bucket-size-label">
-							Bucket width
-						</Typography.Text>
-						<InputNumber
-							value={bucketWidth || null}
-							type="number"
-							precision={2}
-							placeholder="Default: Auto"
-							step={0.1}
-							min={0.0}
-							rootClassName="bucket-input"
-							onChange={(val): void => {
-								setBucketWidth(val || 0);
-							}}
-						/>
-						<section className="combine-hist">
-							<Typography.Text className="label">
-								Merge all series into one
+					<SettingsSection title="Histogram / Buckets">
+						<section className="bucket-config control-container">
+							<Typography.Text className="section-heading">
+								Number of buckets
 							</Typography.Text>
-							<Switch
-								checked={combineHistogram}
-								size="small"
-								onChange={(checked): void => setCombineHistogram(checked)}
+							<InputNumber
+								value={bucketCount || null}
+								type="number"
+								min={0}
+								rootClassName="bucket-input"
+								placeholder="Default: 30"
+								onChange={(val): void => {
+									setBucketCount(val || 0);
+								}}
 							/>
+							<Typography.Text className="section-heading bucket-size-label">
+								Bucket width
+							</Typography.Text>
+							<InputNumber
+								value={bucketWidth || null}
+								type="number"
+								precision={2}
+								placeholder="Default: Auto"
+								step={0.1}
+								min={0.0}
+								rootClassName="bucket-input"
+								onChange={(val): void => {
+									setBucketWidth(val || 0);
+								}}
+							/>
+							<section className="combine-hist">
+								<Typography.Text className="section-heading">
+									Merge all series into one
+								</Typography.Text>
+								<Switch
+									checked={combineHistogram}
+									size="small"
+									onChange={(checked): void => setCombineHistogram(checked)}
+								/>
+							</section>
 						</section>
-					</section>
-				)}
-
-				{allowLogScale && (
-					<section className="log-scale">
-						<Typography.Text className="typography">Y Axis Scale</Typography.Text>
-						<Select
-							onChange={(value): void => setIsLogScale(value === LogScale.LOGARITHMIC)}
-							value={isLogScale ? LogScale.LOGARITHMIC : LogScale.LINEAR}
-							style={{ width: '100%' }}
-							className="panel-type-select"
-							defaultValue={LogScale.LINEAR}
-						>
-							<Option value={LogScale.LINEAR}>
-								<div className="select-option">
-									<div className="icon">
-										<LineChart size={16} />
-									</div>
-									<Typography.Text className="display">Linear</Typography.Text>
-								</div>
-							</Option>
-							<Option value={LogScale.LOGARITHMIC}>
-								<div className="select-option">
-									<div className="icon">
-										<Spline size={16} />
-									</div>
-									<Typography.Text className="display">Logarithmic</Typography.Text>
-								</div>
-							</Option>
-						</Select>
-					</section>
-				)}
-
-				{allowLegendPosition && (
-					<section className="legend-position">
-						<Typography.Text className="typography">Legend Position</Typography.Text>
-						<Select
-							onChange={(value: LegendPosition): void => setLegendPosition(value)}
-							value={legendPosition}
-							style={{ width: '100%' }}
-							className="panel-type-select"
-							defaultValue={LegendPosition.BOTTOM}
-						>
-							<Option value={LegendPosition.BOTTOM}>
-								<div className="select-option">
-									<Typography.Text className="display">Bottom</Typography.Text>
-								</div>
-							</Option>
-							<Option value={LegendPosition.RIGHT}>
-								<div className="select-option">
-									<Typography.Text className="display">Right</Typography.Text>
-								</div>
-							</Option>
-						</Select>
-					</section>
-				)}
-
-				{allowLegendColors && (
-					<section className="legend-colors">
-						<LegendColors
-							customLegendColors={customLegendColors}
-							setCustomLegendColors={setCustomLegendColors}
-							queryResponse={queryResponse}
-						/>
-					</section>
+					</SettingsSection>
 				)}
 			</section>
 
@@ -541,17 +678,25 @@ function RightContainer({
 			)}
 
 			{allowContextLinks && (
-				<section className="context-links">
+				<SettingsSection
+					title="Context Links"
+					icon={<Link size={14} />}
+					defaultOpen={!!contextLinks.linksData.length}
+				>
 					<ContextLinks
 						contextLinks={contextLinks}
 						setContextLinks={setContextLinks}
 						selectedWidget={selectedWidget}
 					/>
-				</section>
+				</SettingsSection>
 			)}
 
 			{allowThreshold && (
-				<section>
+				<SettingsSection
+					title="Thresholds"
+					icon={<Antenna size={14} />}
+					defaultOpen={!!thresholds.length}
+				>
 					<ThresholdSelector
 						thresholds={thresholds}
 						setThresholds={setThresholds}
@@ -559,7 +704,7 @@ function RightContainer({
 						selectedGraph={selectedGraph}
 						columnUnits={columnUnits}
 					/>
-				</section>
+				</SettingsSection>
 			)}
 		</div>
 	);
@@ -615,6 +760,14 @@ export interface RightContainerProps {
 	setContextLinks: Dispatch<SetStateAction<ContextLinksData>>;
 	enableDrillDown?: boolean;
 	isNewDashboard: boolean;
+	lineInterpolation: LineInterpolation;
+	setLineInterpolation: Dispatch<SetStateAction<LineInterpolation>>;
+	fillMode: FillMode;
+	setFillMode: Dispatch<SetStateAction<FillMode>>;
+	lineStyle: LineStyle;
+	setLineStyle: Dispatch<SetStateAction<LineStyle>>;
+	showPoints: boolean;
+	setShowPoints: Dispatch<SetStateAction<boolean>>;
 }
 
 RightContainer.defaultProps = {

frontend/src/container/NewWidget/__test__/NewWidget.test.tsx

@@ -36,7 +36,7 @@ const checkStackSeriesState = (
 	expect(getByTextUtil(container, 'Stack series')).toBeInTheDocument();
 
 	const stackSeriesSection = container.querySelector(
-		'section > .stack-chart',
+		'.stack-chart',
 	) as HTMLElement;
 	expect(stackSeriesSection).toBeInTheDocument();
 
@@ -326,7 +326,7 @@ describe('Stacking bar in new panel', () => {
 		expect(getByText('Stack series')).toBeInTheDocument();
 
 		// Verify section exists
-		const section = container.querySelector('section > .stack-chart');
+		const section = container.querySelector('.stack-chart');
 		expect(section).toBeInTheDocument();
 
 		// Verify switch is present and enabled (ant-switch-checked)

frontend/src/container/NewWidget/index.tsx

@@ -6,6 +6,11 @@ import { UseQueryResult } from 'react-query';
 import { useSelector } from 'react-redux';
 import { generatePath } from 'react-router-dom';
 import { WarningOutlined } from '@ant-design/icons';
+import {
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+} from '@signozhq/resizable';
 import { Button, Flex, Modal, Space, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
@@ -30,6 +35,11 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
+import {
+	FillMode,
+	LineInterpolation,
+	LineStyle,
+} from 'lib/uPlotV2/config/types';
 import { cloneDeep, defaultTo, isEmpty, isUndefined } from 'lodash-es';
 import { Check, X } from 'lucide-react';
 import { useScrollToWidgetIdStore } from 'providers/Dashboard/helpers/scrollToWidgetIdHelper';
@@ -204,6 +214,18 @@ function NewWidget({
 	const [legendPosition, setLegendPosition] = useState<LegendPosition>(
 		selectedWidget?.legendPosition || LegendPosition.BOTTOM,
 	);
+	const [lineInterpolation, setLineInterpolation] = useState<LineInterpolation>(
+		selectedWidget?.lineInterpolation || LineInterpolation.Spline,
+	);
+	const [fillMode, setFillMode] = useState<FillMode>(
+		selectedWidget?.fillMode || FillMode.None,
+	);
+	const [lineStyle, setLineStyle] = useState<LineStyle>(
+		selectedWidget?.lineStyle || LineStyle.Solid,
+	);
+	const [showPoints, setShowPoints] = useState<boolean>(
+		selectedWidget?.showPoints ?? false,
+	);
 	const [customLegendColors, setCustomLegendColors] = useState<
 		Record<string, string>
 	>(selectedWidget?.customLegendColors || {});
@@ -269,6 +291,10 @@ function NewWidget({
 				softMin,
 				softMax,
 				fillSpans: isFillSpans,
+				lineInterpolation,
+				fillMode,
+				lineStyle,
+				showPoints,
 				columnUnits,
 				bucketCount,
 				stackedBarChart,
@@ -304,6 +330,10 @@ function NewWidget({
 		stackedBarChart,
 		isLogScale,
 		legendPosition,
+		lineInterpolation,
+		fillMode,
+		lineStyle,
+		showPoints,
 		customLegendColors,
 		contextLinks,
 		selectedWidget.columnWidths,
@@ -757,7 +787,7 @@ function NewWidget({
 	}, [query, safeNavigate, dashboardId, currentQuery]);
 
 	return (
-		<Container>
+		<Container className="new-widget-container">
 			<div className="edit-header">
 				<div className="left-header">
 					<X
@@ -811,81 +841,104 @@ function NewWidget({
 			</div>
 
 			<PanelContainer>
-				<LeftContainerWrapper isDarkMode={useIsDarkMode()}>
-					<OverlayScrollbar>
-						{selectedWidget && (
-							<LeftContainer
-								selectedGraph={graphType}
-								selectedLogFields={selectedLogFields}
-								setSelectedLogFields={setSelectedLogFields}
-								selectedTracesFields={selectedTracesFields}
-								setSelectedTracesFields={setSelectedTracesFields}
-								selectedWidget={selectedWidget}
-								selectedTime={selectedTime}
-								requestData={requestData}
-								setRequestData={setRequestData}
-								isLoadingPanelData={isLoadingPanelData}
-								setQueryResponse={setQueryResponse}
-								enableDrillDown={enableDrillDown}
-								selectedDashboard={selectedDashboard}
-								isNewPanel={isNewPanel}
-							/>
-						)}
-					</OverlayScrollbar>
-				</LeftContainerWrapper>
-
-				<RightContainerWrapper>
-					<OverlayScrollbar>
-						<RightContainer
-							setGraphHandler={setGraphHandler}
-							title={title}
-							setTitle={setTitle}
-							description={description}
-							setDescription={setDescription}
-							stackedBarChart={stackedBarChart}
-							setStackedBarChart={setStackedBarChart}
-							opacity={opacity}
-							yAxisUnit={yAxisUnit}
-							columnUnits={columnUnits}
-							setColumnUnits={setColumnUnits}
-							bucketCount={bucketCount}
-							bucketWidth={bucketWidth}
-							combineHistogram={combineHistogram}
-							setCombineHistogram={setCombineHistogram}
-							setBucketWidth={setBucketWidth}
-							setBucketCount={setBucketCount}
-							setOpacity={setOpacity}
-							selectedNullZeroValue={selectedNullZeroValue}
-							setSelectedNullZeroValue={setSelectedNullZeroValue}
-							selectedGraph={graphType}
-							setSelectedTime={setSelectedTime}
-							selectedTime={selectedTime}
-							setYAxisUnit={setYAxisUnit}
-							decimalPrecision={decimalPrecision}
-							setDecimalPrecision={setDecimalPrecision}
-							thresholds={thresholds}
-							setThresholds={setThresholds}
-							selectedWidget={selectedWidget}
-							isFillSpans={isFillSpans}
-							setIsFillSpans={setIsFillSpans}
-							isLogScale={isLogScale}
-							setIsLogScale={setIsLogScale}
-							legendPosition={legendPosition}
-							setLegendPosition={setLegendPosition}
-							customLegendColors={customLegendColors}
-							setCustomLegendColors={setCustomLegendColors}
-							queryResponse={queryResponse}
-							softMin={softMin}
-							setSoftMin={setSoftMin}
-							softMax={softMax}
-							setSoftMax={setSoftMax}
-							contextLinks={contextLinks}
-							setContextLinks={setContextLinks}
-							enableDrillDown={enableDrillDown}
-							isNewDashboard={isNewDashboard}
-						/>
-					</OverlayScrollbar>
-				</RightContainerWrapper>
+				<ResizablePanelGroup direction="horizontal" autoSaveId="panel-editor">
+					<ResizablePanel
+						minSize={70}
+						maxSize={80}
+						defaultSize={80}
+						className="resizable-panel-left-container"
+					>
+						<OverlayScrollbar>
+							<LeftContainerWrapper isDarkMode={useIsDarkMode()}>
+								{selectedWidget && (
+									<LeftContainer
+										selectedDashboard={selectedDashboard}
+										selectedGraph={graphType}
+										selectedLogFields={selectedLogFields}
+										setSelectedLogFields={setSelectedLogFields}
+										selectedTracesFields={selectedTracesFields}
+										setSelectedTracesFields={setSelectedTracesFields}
+										selectedWidget={selectedWidget}
+										selectedTime={selectedTime}
+										requestData={requestData}
+										setRequestData={setRequestData}
+										isLoadingPanelData={isLoadingPanelData}
+										setQueryResponse={setQueryResponse}
+										enableDrillDown={enableDrillDown}
+									/>
+								)}
+							</LeftContainerWrapper>
+						</OverlayScrollbar>
+					</ResizablePanel>
+					<ResizableHandle withHandle className="widget-resizable-handle" />
+					<ResizablePanel
+						minSize={20}
+						maxSize={30}
+						defaultSize={20}
+						className="resizable-panel-right-container"
+					>
+						<OverlayScrollbar>
+							<RightContainerWrapper>
+								<RightContainer
+									setGraphHandler={setGraphHandler}
+									title={title}
+									setTitle={setTitle}
+									description={description}
+									setDescription={setDescription}
+									stackedBarChart={stackedBarChart}
+									setStackedBarChart={setStackedBarChart}
+									lineInterpolation={lineInterpolation}
+									setLineInterpolation={setLineInterpolation}
+									fillMode={fillMode}
+									setFillMode={setFillMode}
+									lineStyle={lineStyle}
+									setLineStyle={setLineStyle}
+									showPoints={showPoints}
+									setShowPoints={setShowPoints}
+									opacity={opacity}
+									yAxisUnit={yAxisUnit}
+									columnUnits={columnUnits}
+									setColumnUnits={setColumnUnits}
+									bucketCount={bucketCount}
+									bucketWidth={bucketWidth}
+									combineHistogram={combineHistogram}
+									setCombineHistogram={setCombineHistogram}
+									setBucketWidth={setBucketWidth}
+									setBucketCount={setBucketCount}
+									setOpacity={setOpacity}
+									selectedNullZeroValue={selectedNullZeroValue}
+									setSelectedNullZeroValue={setSelectedNullZeroValue}
+									selectedGraph={graphType}
+									setSelectedTime={setSelectedTime}
+									selectedTime={selectedTime}
+									setYAxisUnit={setYAxisUnit}
+									decimalPrecision={decimalPrecision}
+									setDecimalPrecision={setDecimalPrecision}
+									thresholds={thresholds}
+									setThresholds={setThresholds}
+									selectedWidget={selectedWidget}
+									isFillSpans={isFillSpans}
+									setIsFillSpans={setIsFillSpans}
+									isLogScale={isLogScale}
+									setIsLogScale={setIsLogScale}
+									legendPosition={legendPosition}
+									setLegendPosition={setLegendPosition}
+									customLegendColors={customLegendColors}
+									setCustomLegendColors={setCustomLegendColors}
+									queryResponse={queryResponse}
+									softMin={softMin}
+									setSoftMin={setSoftMin}
+									softMax={softMax}
+									setSoftMax={setSoftMax}
+									contextLinks={contextLinks}
+									setContextLinks={setContextLinks}
+									enableDrillDown={enableDrillDown}
+									isNewDashboard={isNewDashboard}
+								/>
+							</RightContainerWrapper>
+						</OverlayScrollbar>
+					</ResizablePanel>
+				</ResizablePanelGroup>
 			</PanelContainer>
 			<Modal
 				title={

frontend/src/container/NewWidget/styles.ts

@@ -10,8 +10,7 @@ export const Container = styled.div`
 
 export const RightContainerWrapper = styled(Col)`
 	&&& {
-		max-width: 400px;
-		width: 30%;
+		width: 100%;
 		overflow-y: auto;
 	}
 	&::-webkit-scrollbar {

frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts

@@ -3,14 +3,15 @@ import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
 import uPlot, { Series } from 'uplot';
 
+import { generateGradientFill } from '../utils/generateGradientFill';
 import {
 	BarAlignment,
 	ConfigBuilder,
 	DrawStyle,
+	FillMode,
 	LineInterpolation,
 	LineStyle,
 	SeriesProps,
-	VisibilityMode,
 } from './types';
 
 /**
@@ -52,7 +53,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}: {
 		resolvedLineColor: string;
 	}): Partial<Series> {
-		const { lineWidth, lineStyle, lineCap, fillColor } = this.props;
+		const { lineWidth, lineStyle, lineCap, fillColor, fillMode } = this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: resolvedLineColor,
 			width: lineWidth ?? DEFAULT_LINE_WIDTH,
@@ -66,12 +67,19 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			lineConfig.cap = lineCap;
 		}
 
-		if (fillColor) {
-			lineConfig.fill = fillColor;
-		} else if (this.props.drawStyle === DrawStyle.Bar) {
-			lineConfig.fill = resolvedLineColor;
+		const finalFillColor = fillColor ?? resolvedLineColor;
+
+		if (this.props.drawStyle === DrawStyle.Bar) {
+			lineConfig.fill = finalFillColor;
 		} else if (this.props.drawStyle === DrawStyle.Histogram) {
-			lineConfig.fill = `${resolvedLineColor}40`;
+			lineConfig.fill = `${finalFillColor}40`;
+		} else if (fillMode && fillMode !== FillMode.None) {
+			if (fillMode === FillMode.Solid) {
+				lineConfig.fill = finalFillColor;
+			} else if (fillMode === FillMode.Gradient) {
+				lineConfig.fill = (self: uPlot): CanvasGradient =>
+					generateGradientFill(self, finalFillColor, 'rgba(0, 0, 0, 0)');
+			}
 		}
 
 		return lineConfig;
@@ -159,12 +167,8 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			pointsConfig.show = pointsBuilder;
 		} else if (drawStyle === DrawStyle.Points) {
 			pointsConfig.show = true;
-		} else if (showPoints === VisibilityMode.Never) {
-			pointsConfig.show = false;
-		} else if (showPoints === VisibilityMode.Always) {
-			pointsConfig.show = true;
 		} else {
-			pointsConfig.show = false; // default to hidden
+			pointsConfig.show = !!showPoints;
 		}
 
 		return pointsConfig;

frontend/src/lib/uPlotV2/config/__tests__/UPlotSeriesBuilder.test.ts

@@ -2,12 +2,7 @@ import { themeColors } from 'constants/theme';
 import uPlot from 'uplot';
 
 import type { SeriesProps } from '../types';
-import {
-	DrawStyle,
-	LineInterpolation,
-	LineStyle,
-	VisibilityMode,
-} from '../types';
+import { DrawStyle, LineInterpolation, LineStyle } from '../types';
 import { POINT_SIZE_FACTOR, UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
 
 const createBaseProps = (
@@ -168,17 +163,17 @@ describe('UPlotSeriesBuilder', () => {
 		expect(config.points?.show).toBe(pointsBuilder);
 	});
 
-	it('respects VisibilityMode for point visibility when no custom pointsBuilder is given', () => {
+	it('respects showPoints for point visibility when no custom pointsBuilder is given', () => {
 		const neverPointsBuilder = new UPlotSeriesBuilder(
 			createBaseProps({
 				drawStyle: DrawStyle.Line,
-				showPoints: VisibilityMode.Never,
+				showPoints: false,
 			}),
 		);
 		const alwaysPointsBuilder = new UPlotSeriesBuilder(
 			createBaseProps({
 				drawStyle: DrawStyle.Line,
-				showPoints: VisibilityMode.Always,
+				showPoints: true,
 			}),
 		);
 

frontend/src/lib/uPlotV2/config/types.ts

@@ -122,12 +122,6 @@ export enum LineInterpolation {
 	StepBefore = 'stepBefore',
 }
 
-export enum VisibilityMode {
-	Always = 'always',
-	Auto = 'auto',
-	Never = 'never',
-}
-
 /**
  * Props for configuring lines
  */
@@ -163,7 +157,13 @@ export interface BarConfig {
 export interface PointsConfig {
 	pointColor?: string;
 	pointSize?: number;
-	showPoints?: VisibilityMode;
+	showPoints?: boolean;
+}
+
+export enum FillMode {
+	Solid = 'solid',
+	Gradient = 'gradient',
+	None = 'none',
 }
 
 export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
@@ -177,6 +177,7 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	show?: boolean;
 	spanGaps?: boolean;
 	fillColor?: string;
+	fillMode?: FillMode;
 	isDarkMode?: boolean;
 	stepInterval?: number;
 }

frontend/src/lib/uPlotV2/utils/generateGradientFill.ts

@@ -0,0 +1,18 @@
+import uPlot from 'uplot';
+
+export function generateGradientFill(
+	uPlotInstance: uPlot,
+	startColor: string,
+	endColor: string,
+): CanvasGradient {
+	const g = uPlotInstance.ctx.createLinearGradient(
+		0,
+		0,
+		0,
+		uPlotInstance.bbox.height,
+	);
+	g.addColorStop(0, `${startColor}70`);
+	g.addColorStop(0.6, `${startColor}40`);
+	g.addColorStop(1, endColor);
+	return g;
+}

frontend/src/types/api/dashboard/getAll.ts

@@ -5,6 +5,11 @@ import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
 import { QueryTableProps } from 'container/QueryTable/QueryTable.intefaces';
+import {
+	FillMode,
+	LineInterpolation,
+	LineStyle,
+} from 'lib/uPlotV2/config/types';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { IField } from '../logs/fields';
@@ -132,6 +137,10 @@ export interface IBaseWidget {
 	legendPosition?: LegendPosition;
 	customLegendColors?: Record<string, string>;
 	contextLinks?: ContextLinksData;
+	lineInterpolation?: LineInterpolation;
+	showPoints?: boolean;
+	lineStyle?: LineStyle;
+	fillMode?: FillMode;
 }
 export interface Widgets extends IBaseWidget {
 	query: Query;

frontend/yarn.lock

@@ -5646,7 +5646,7 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
-"@signozhq/toggle-group@^0.0.1":
+"@signozhq/toggle-group@0.0.1":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@signozhq/toggle-group/-/toggle-group-0.0.1.tgz#c82ff1da34e77b24da53c2d595ad6b4a0d1b1de4"
   integrity sha512-871bQayL5MaqsuNOFHKexidu9W2Hlg1y4xmH8C5mGmlfZ4bd0ovJ9OweQrM6Puys3jeMwi69xmJuesYCfKQc1g==

pkg/telemetrytraces/const.go

@@ -1,50 +1,6 @@
 package telemetrytraces
 
-import (
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-)
-
-const (
-
-	// Internal Columns
-	SpanTimestampBucketStartColumn = "ts_bucket_start"
-	SpanResourceFingerPrintColumn  = "resource_fingerprint"
-
-	// Intrinsic Columns
-	SpanTimestampColumn        = "timestamp"
-	SpanTraceIDColumn          = "trace_id"
-	SpanSpanIDColumn           = "span_id"
-	SpanTraceStateColumn       = "trace_state"
-	SpanParentSpanIDColumn     = "parent_span_id"
-	SpanFlagsColumn            = "flags"
-	SpanNameColumn             = "name"
-	SpanKindColumn             = "kind"
-	SpanKindStringColumn       = "kind_string"
-	SpanDurationNanoColumn     = "duration_nano"
-	SpanStatusCodeColumn       = "status_code"
-	SpanStatusMessageColumn    = "status_message"
-	SpanStatusCodeStringColumn = "status_code_string"
-	SpanEventsColumn           = "events"
-	SpanLinksColumn            = "links"
-
-	// Calculated Columns
-	SpanResponseStatusCodeColumn = "response_status_code"
-	SpanExternalHTTPURLColumn    = "external_http_url"
-	SpanHTTPURLColumn            = "http_url"
-	SpanExternalHTTPMethodColumn = "external_http_method"
-	SpanHTTPMethodColumn         = "http_method"
-	SpanHTTPHostColumn           = "http_host"
-	SpanDBNameColumn             = "db_name"
-	SpanDBOperationColumn        = "db_operation"
-	SpanHasErrorColumn           = "has_error"
-	SpanIsRemoteColumn           = "is_remote"
-
-	// Contextual Columns
-	SpanAttributesStringColumn = "attributes_string"
-	SpanAttributesNumberColumn = "attributes_number"
-	SpanAttributesBoolColumn   = "attributes_bool"
-	SpanResourcesStringColumn  = "resources_string"
-)
+import "github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 
 var (
 	IntrinsicFields = map[string]telemetrytypes.TelemetryFieldKey{

pkg/telemetrytraces/statement_builder.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"fmt"
 	"log/slog"
+	"slices"
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -13,6 +14,7 @@ import (
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/huandu/go-sqlbuilder"
+	"golang.org/x/exp/maps"
 )
 
 var (
@@ -72,6 +74,41 @@ func (b *traceQueryStatementBuilder) Build(
 		return nil, err
 	}
 
+	/*
+		Adding a tech debt note here:
+		This piece of code is a hot fix and should be removed once we close issue: engineering-pod/issues/3622
+	*/
+	/*
+		-------------------------------- Start of tech debt ----------------------------
+	*/
+	if requestType == qbtypes.RequestTypeRaw {
+
+		selectedFields := query.SelectFields
+
+		if len(selectedFields) == 0 {
+			sortedKeys := maps.Keys(DefaultFields)
+			slices.Sort(sortedKeys)
+			for _, key := range sortedKeys {
+				selectedFields = append(selectedFields, DefaultFields[key])
+			}
+			query.SelectFields = selectedFields
+		}
+
+		selectFieldKeys := []string{}
+		for _, field := range selectedFields {
+			selectFieldKeys = append(selectFieldKeys, field.Name)
+		}
+
+		for _, x := range []string{"timestamp", "span_id", "trace_id"} {
+			if !slices.Contains(selectFieldKeys, x) {
+				query.SelectFields = append(query.SelectFields, DefaultFields[x])
+			}
+		}
+	}
+	/*
+		-------------------------------- End of tech debt ----------------------------
+	*/
+
 	query = b.adjustKeys(ctx, keys, query, requestType)
 
 	// Check if filter contains trace_id(s) and optimize time range if needed
@@ -274,53 +311,13 @@ func (b *traceQueryStatementBuilder) buildListQuery(
 		cteArgs = append(cteArgs, args)
 	}
 
-	sb.SelectMore(SpanTimestampColumn)
-	sb.SelectMore(SpanTraceIDColumn)
-	sb.SelectMore(SpanSpanIDColumn)
-	// By default select all
-	if len(query.SelectFields) == 0 {
-		// Select all intrinsic columns
-		sb.SelectMore(SpanTraceStateColumn)
-		sb.SelectMore(SpanParentSpanIDColumn)
-		sb.SelectMore(SpanFlagsColumn)
-		sb.SelectMore(SpanNameColumn)
-		sb.SelectMore(SpanKindColumn)
-		sb.SelectMore(SpanKindStringColumn)
-		sb.SelectMore(SpanDurationNanoColumn)
-		sb.SelectMore(SpanStatusCodeColumn)
-		sb.SelectMore(SpanStatusMessageColumn)
-		sb.SelectMore(SpanStatusCodeStringColumn)
-		sb.SelectMore(SpanEventsColumn)
-		sb.SelectMore(SpanLinksColumn)
-
-		// select all calculated columns
-		sb.SelectMore(SpanResponseStatusCodeColumn)
-		sb.SelectMore(SpanExternalHTTPURLColumn)
-		sb.SelectMore(SpanHTTPURLColumn)
-		sb.SelectMore(SpanExternalHTTPMethodColumn)
-		sb.SelectMore(SpanHTTPMethodColumn)
-		sb.SelectMore(SpanHTTPHostColumn)
-		sb.SelectMore(SpanDBNameColumn)
-		sb.SelectMore(SpanDBOperationColumn)
-		sb.SelectMore(SpanHasErrorColumn)
-		sb.SelectMore(SpanIsRemoteColumn)
-
-		// select all contextual columns
-		sb.SelectMore(SpanAttributesStringColumn)
-		sb.SelectMore(SpanAttributesNumberColumn)
-		sb.SelectMore(SpanAttributesBoolColumn)
-		sb.SelectMore(SpanResourcesStringColumn)
-	} else {
-		for _, field := range query.SelectFields {
-			if field.Name == SpanTimestampColumn || field.Name == SpanTraceIDColumn || field.Name == SpanSpanIDColumn {
-				continue
-			}
-			colExpr, err := b.fm.ColumnExpressionFor(ctx, &field, keys)
-			if err != nil {
-				return nil, err
-			}
-			sb.SelectMore(colExpr)
+	// TODO: should we deprecate `SelectFields` and return everything from a span like we do for logs?
+	for _, field := range query.SelectFields {
+		colExpr, err := b.fm.ColumnExpressionFor(ctx, &field, keys)
+		if err != nil {
+			return nil, err
 		}
+		sb.SelectMore(colExpr)
 	}
 
 	// From table