chore: updated conditions

* feat: added section in panel settings

* feat: added changes for spangaps thresholds

* chore: minor changes

* fix: fixed failing tests

* fix: minor style fixes

* chore: updated the categorisation

* feat: added chart appearance settings in panel

* feat: added fill mode in timeseries

* chore: broke down rightcontainer component into sub-components

* chore: minor cleanup

* chore: fixed disconnect points logic

* chore: added spanGaps selection component

* chore: updated rightcontainer

* fix: added fix for the UI

* chore: fixed ui issues

* chore: fixed styles

* chore: default spangaps to true

* chore: moved preparedata to utils

* chore: hidden chart appearance

* chore: pr review comments

* chore: pr review comments

* chore: updated variable names

* chore: fixed minor changes

* chore: updated test

* chore: updated test

frontend/.eslintrc.cjs

@@ -193,6 +193,16 @@ module.exports = {
 				],
 			},
 		],
+		'no-restricted-syntax': [
+			'error',
+			{
+				selector:
+					// TODO: Make this generic on removal of redux
+					"CallExpression[callee.property.name='getState'][callee.object.name=/^use/]",
+				message:
+					'Avoid calling .getState() directly. Export a standalone action from the store instead.',
+			},
+		],
 	},
 	overrides: [
 		{
@@ -217,5 +227,13 @@ module.exports = {
 				'@typescript-eslint/no-unused-vars': 'warn',
 			},
 		},
+		{
+			// Store definition files are the only place .getState() is permitted —
+			// they are the canonical source for standalone action exports.
+			files: ['**/*Store.{ts,tsx}'],
+			rules: {
+				'no-restricted-syntax': 'off',
+			},
+		},
 	],
 };

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -5,7 +5,7 @@ import {
 	LegendPosition,
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
-import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
+import UPlotChart from 'lib/uPlotV2/components/UPlotChart/UPlotChart';
 import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
 import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
 import noop from 'lodash-es/noop';

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

@@ -123,7 +123,7 @@ export const prepareUPlotConfig = ({
 			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: true,
+			spanGaps: widget.spanGaps ?? true,
 			lineStyle: widget.lineStyle || LineStyle.Solid,
 			lineInterpolation: widget.lineInterpolation || LineInterpolation.Spline,
 			showPoints:

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

@@ -1,21 +0,0 @@
-.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

@@ -1,94 +0,0 @@
-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

@@ -1,21 +0,0 @@
-.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

@@ -1,110 +0,0 @@
-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

@@ -1,21 +0,0 @@
-.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

@@ -1,66 +0,0 @@
-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

@@ -4,6 +4,10 @@
 	font-family: 'Space Mono';
 	padding-bottom: 48px;
 
+	.panel-type-select {
+		width: 100%;
+	}
+
 	.section-heading {
 		font-family: 'Space Mono';
 		color: var(--bg-vanilla-400);
@@ -26,10 +30,6 @@
 		letter-spacing: 0.48px;
 	}
 
-	.panel-type-select {
-		width: 100%;
-	}
-
 	.header {
 		display: flex;
 		padding: 14px 14px 14px 12px;
@@ -192,6 +192,16 @@
 			justify-content: space-between;
 		}
 	}
+
+	.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 {
@@ -216,7 +226,8 @@
 .lightMode {
 	.right-container {
 		background-color: var(--bg-vanilla-100);
-		.section-heading {
+		.section-heading,
+		.section-heading-small {
 			color: var(--bg-ink-400);
 		}
 		.header {

frontend/src/container/NewWidget/RightContainer/SettingSections/ChartAppearanceSection/ChartAppearanceSection.tsx

@@ -7,9 +7,10 @@ import {
 } from 'lib/uPlotV2/config/types';
 import { Paintbrush } from 'lucide-react';
 
-import { FillModeSelector } from '../../components/FillModeSelector/FillModeSelector';
-import { LineInterpolationSelector } from '../../components/LineInterpolationSelector/LineInterpolationSelector';
-import { LineStyleSelector } from '../../components/LineStyleSelector/LineStyleSelector';
+import DisconnectValuesSelector from '../../components/DisconnectValuesSelector/DisconnectValuesSelector';
+import FillModeSelector from '../../components/FillModeSelector/FillModeSelector';
+import LineInterpolationSelector from '../../components/LineInterpolationSelector/LineInterpolationSelector';
+import LineStyleSelector from '../../components/LineStyleSelector/LineStyleSelector';
 import SettingsSection from '../../components/SettingsSection/SettingsSection';
 
 interface ChartAppearanceSectionProps {
@@ -21,10 +22,14 @@ interface ChartAppearanceSectionProps {
 	setLineInterpolation: Dispatch<SetStateAction<LineInterpolation>>;
 	showPoints: boolean;
 	setShowPoints: Dispatch<SetStateAction<boolean>>;
+	spanGaps: boolean | number;
+	setSpanGaps: Dispatch<SetStateAction<boolean | number>>;
 	allowFillMode: boolean;
 	allowLineStyle: boolean;
 	allowLineInterpolation: boolean;
 	allowShowPoints: boolean;
+	allowSpanGaps: boolean;
+	stepInterval: number;
 }
 
 export default function ChartAppearanceSection({
@@ -36,10 +41,14 @@ export default function ChartAppearanceSection({
 	setLineInterpolation,
 	showPoints,
 	setShowPoints,
+	spanGaps,
+	setSpanGaps,
 	allowFillMode,
 	allowLineStyle,
 	allowLineInterpolation,
 	allowShowPoints,
+	allowSpanGaps,
+	stepInterval,
 }: ChartAppearanceSectionProps): JSX.Element {
 	return (
 		<SettingsSection title="Chart Appearance" icon={<Paintbrush size={14} />}>
@@ -66,6 +75,13 @@ export default function ChartAppearanceSection({
 					<Switch size="small" checked={showPoints} onChange={setShowPoints} />
 				</section>
 			)}
+			{allowSpanGaps && (
+				<DisconnectValuesSelector
+					value={spanGaps}
+					minValue={stepInterval}
+					onChange={setSpanGaps}
+				/>
+			)}
 		</SettingsSection>
 	);
 }

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

@@ -178,6 +178,8 @@ describe('RightContainer - Alerts Section', () => {
 		setLineStyle: jest.fn(),
 		showPoints: false,
 		setShowPoints: jest.fn(),
+		spanGaps: false,
+		setSpanGaps: jest.fn(),
 	};
 
 	beforeEach(() => {

frontend/src/container/NewWidget/RightContainer/components/DisconnectValuesSelector/DisconnectValuesModeToggle.tsx

@@ -0,0 +1,38 @@
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Typography } from 'antd';
+import { DisconnectedValuesMode } from 'lib/uPlotV2/config/types';
+
+interface DisconnectValuesModeToggleProps {
+	value: DisconnectedValuesMode;
+	onChange: (value: DisconnectedValuesMode) => void;
+}
+
+export default function DisconnectValuesModeToggle({
+	value,
+	onChange,
+}: DisconnectValuesModeToggleProps): JSX.Element {
+	return (
+		<ToggleGroup
+			type="single"
+			value={value}
+			size="lg"
+			onValueChange={(newValue): void => {
+				if (newValue) {
+					onChange(newValue as DisconnectedValuesMode);
+				}
+			}}
+		>
+			<ToggleGroupItem value={DisconnectedValuesMode.Never} aria-label="Never">
+				<Typography.Text className="section-heading-small">Never</Typography.Text>
+			</ToggleGroupItem>
+			<ToggleGroupItem
+				value={DisconnectedValuesMode.Threshold}
+				aria-label="Threshold"
+			>
+				<Typography.Text className="section-heading-small">
+					Threshold
+				</Typography.Text>
+			</ToggleGroupItem>
+		</ToggleGroup>
+	);
+}

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

@@ -0,0 +1,21 @@
+.disconnect-values-selector {
+	.disconnect-values-input-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+		.disconnect-values-threshold-wrapper {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			.disconnect-values-threshold-input {
+				max-width: 160px;
+				height: auto;
+				.disconnect-values-threshold-prefix {
+					padding: 0 8px;
+					font-size: 20px;
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,91 @@
+import { useEffect, useState } from 'react';
+import { Typography } from 'antd';
+import { DisconnectedValuesMode } from 'lib/uPlotV2/config/types';
+
+import DisconnectValuesModeToggle from './DisconnectValuesModeToggle';
+import DisconnectValuesThresholdInput from './DisconnectValuesThresholdInput';
+
+import './DisconnectValuesSelector.styles.scss';
+
+const DEFAULT_THRESHOLD_SECONDS = 60;
+
+interface DisconnectValuesSelectorProps {
+	value: boolean | number;
+	minValue: number;
+	onChange: (value: boolean | number) => void;
+}
+
+export default function DisconnectValuesSelector({
+	value,
+	minValue,
+	onChange,
+}: DisconnectValuesSelectorProps): JSX.Element {
+	const [mode, setMode] = useState<DisconnectedValuesMode>(() => {
+		if (typeof value === 'number') {
+			return DisconnectedValuesMode.Threshold;
+		}
+		return DisconnectedValuesMode.Never;
+	});
+	const [thresholdSeconds, setThresholdSeconds] = useState<number>(
+		typeof value === 'number' ? value : minValue ?? DEFAULT_THRESHOLD_SECONDS,
+	);
+
+	useEffect(() => {
+		if (typeof value === 'boolean') {
+			setMode(DisconnectedValuesMode.Never);
+		} else if (typeof value === 'number') {
+			setMode(DisconnectedValuesMode.Threshold);
+			setThresholdSeconds(value);
+		}
+	}, [value]);
+
+	useEffect(() => {
+		if (minValue !== undefined) {
+			setThresholdSeconds(minValue);
+			if (mode === DisconnectedValuesMode.Threshold) {
+				onChange(minValue);
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [minValue]);
+
+	const handleModeChange = (newMode: DisconnectedValuesMode): void => {
+		setMode(newMode);
+		switch (newMode) {
+			case DisconnectedValuesMode.Never:
+				onChange(true);
+				break;
+			case DisconnectedValuesMode.Threshold:
+				onChange(thresholdSeconds);
+				break;
+		}
+	};
+
+	const handleThresholdChange = (seconds: number): void => {
+		setThresholdSeconds(seconds);
+		onChange(seconds);
+	};
+
+	return (
+		<section className="disconnect-values-selector control-container">
+			<Typography.Text className="section-heading">
+				Disconnect values
+			</Typography.Text>
+			<div className="disconnect-values-input-wrapper">
+				<DisconnectValuesModeToggle value={mode} onChange={handleModeChange} />
+				{mode === DisconnectedValuesMode.Threshold && (
+					<section className="control-container">
+						<Typography.Text className="section-heading">
+							Threshold Value
+						</Typography.Text>
+						<DisconnectValuesThresholdInput
+							value={thresholdSeconds}
+							minValue={minValue}
+							onChange={handleThresholdChange}
+						/>
+					</section>
+				)}
+			</div>
+		</section>
+	);
+}

frontend/src/container/NewWidget/RightContainer/components/DisconnectValuesSelector/DisconnectValuesThresholdInput.tsx

@@ -0,0 +1,92 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+import { rangeUtil } from '@grafana/data';
+import { Callout, Input } from '@signozhq/ui';
+interface DisconnectValuesThresholdInputProps {
+	value: number;
+	onChange: (seconds: number) => void;
+	minValue: number;
+}
+
+export default function DisconnectValuesThresholdInput({
+	value,
+	onChange,
+	minValue,
+}: DisconnectValuesThresholdInputProps): JSX.Element {
+	const [inputValue, setInputValue] = useState<string>(
+		rangeUtil.secondsToHms(value),
+	);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		setInputValue(rangeUtil.secondsToHms(value));
+		setError(null);
+	}, [value]);
+
+	const updateValue = (txt: string): void => {
+		if (!txt) {
+			return;
+		}
+		try {
+			let seconds: number;
+			if (rangeUtil.isValidTimeSpan(txt)) {
+				seconds = rangeUtil.intervalToSeconds(txt);
+			} else {
+				const parsed = Number(txt);
+				if (Number.isNaN(parsed) || parsed <= 0) {
+					setError('Enter a valid duration (e.g. 1h, 10m, 1d)');
+					return;
+				}
+				seconds = parsed;
+			}
+			if (minValue !== undefined && seconds < minValue) {
+				setError(`Threshold should be > ${rangeUtil.secondsToHms(minValue)}`);
+				return;
+			}
+			setError(null);
+			setInputValue(txt);
+			onChange(seconds);
+		} catch {
+			setError('Invalid threshold value');
+		}
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+		if (e.key === 'Enter') {
+			updateValue(e.currentTarget.value);
+		}
+	};
+
+	const handleBlur = (e: React.FocusEvent<HTMLInputElement>): void => {
+		updateValue(e.currentTarget.value);
+	};
+
+	const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
+		setInputValue(e.currentTarget.value);
+		if (error) {
+			setError(null);
+		}
+	};
+
+	return (
+		<div className="disconnect-values-threshold-wrapper">
+			<Input
+				name="disconnect-values-threshold"
+				type="text"
+				className="disconnect-values-threshold-input"
+				prefix={<span className="disconnect-values-threshold-prefix">&gt;</span>}
+				value={inputValue}
+				onChange={handleChange}
+				onKeyDown={handleKeyDown}
+				onBlur={handleBlur}
+				autoFocus={true}
+				aria-invalid={!!error}
+				aria-describedby={error ? 'threshold-error' : undefined}
+			/>
+			{error && (
+				<Callout type="error" size="small" showIcon>
+					{error}
+				</Callout>
+			)}
+		</div>
+	);
+}

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

@@ -9,7 +9,7 @@ interface FillModeSelectorProps {
 	onChange: (value: FillMode) => void;
 }
 
-export function FillModeSelector({
+export default function FillModeSelector({
 	value,
 	onChange,
 }: FillModeSelectorProps): JSX.Element {

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

@@ -9,7 +9,7 @@ interface LineInterpolationSelectorProps {
 	onChange: (value: LineInterpolation) => void;
 }
 
-export function LineInterpolationSelector({
+export default function LineInterpolationSelector({
 	value,
 	onChange,
 }: LineInterpolationSelectorProps): JSX.Element {

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

@@ -9,7 +9,7 @@ interface LineStyleSelectorProps {
 	onChange: (value: LineStyle) => void;
 }
 
-export function LineStyleSelector({
+export default function LineStyleSelector({
 	value,
 	onChange,
 }: LineStyleSelectorProps): JSX.Element {

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

@@ -262,3 +262,17 @@ export const panelTypeVsShowPoints: {
 	[PANEL_TYPES.TRACE]: false,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
 } as const;
+
+export const panelTypeVsSpanGaps: {
+	[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

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction, useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Typography } from 'antd';
+import { ExecStats } from 'api/v5/v5';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { PANEL_TYPES, PanelDisplay } from 'constants/queryBuilder';
 import { PanelTypesWithData } from 'container/DashboardContainer/PanelTypeSelectionModal/menuItems';
@@ -11,6 +12,7 @@ import {
 	LineInterpolation,
 	LineStyle,
 } from 'lib/uPlotV2/config/types';
+import get from 'lodash-es/get';
 import { SuccessResponse } from 'types/api';
 import {
 	ColumnUnit,
@@ -36,6 +38,7 @@ import {
 	panelTypeVsPanelTimePreferences,
 	panelTypeVsShowPoints,
 	panelTypeVsSoftMinMax,
+	panelTypeVsSpanGaps,
 	panelTypeVsStackingChartPreferences,
 	panelTypeVsThreshold,
 	panelTypeVsYAxisUnit,
@@ -68,6 +71,8 @@ function RightContainer({
 	setLineStyle,
 	showPoints,
 	setShowPoints,
+	spanGaps,
+	setSpanGaps,
 	bucketCount,
 	bucketWidth,
 	stackedBarChart,
@@ -138,6 +143,7 @@ function RightContainer({
 	const allowLineStyle = panelTypeVsLineStyle[selectedGraph];
 	const allowFillMode = panelTypeVsFillMode[selectedGraph];
 	const allowShowPoints = panelTypeVsShowPoints[selectedGraph];
+	const allowSpanGaps = panelTypeVsSpanGaps[selectedGraph];
 
 	const decimapPrecisionOptions = useMemo(
 		() => [
@@ -176,10 +182,26 @@ function RightContainer({
 			(allowFillMode ||
 				allowLineStyle ||
 				allowLineInterpolation ||
-				allowShowPoints),
-		[allowFillMode, allowLineStyle, allowLineInterpolation, allowShowPoints],
+				allowShowPoints ||
+				allowSpanGaps),
+		[
+			allowFillMode,
+			allowLineStyle,
+			allowLineInterpolation,
+			allowShowPoints,
+			allowSpanGaps,
+		],
 	);
 
+	const stepInterval = useMemo(() => {
+		const stepIntervals: ExecStats['stepIntervals'] = get(
+			queryResponse,
+			'data.payload.data.newResult.meta.stepIntervals',
+			{},
+		);
+		return Math.min(...Object.values(stepIntervals));
+	}, [queryResponse]);
+
 	return (
 		<div className="right-container">
 			<section className="header">
@@ -237,10 +259,14 @@ function RightContainer({
 						setLineInterpolation={setLineInterpolation}
 						showPoints={showPoints}
 						setShowPoints={setShowPoints}
+						spanGaps={spanGaps}
+						setSpanGaps={setSpanGaps}
 						allowFillMode={allowFillMode}
 						allowLineStyle={allowLineStyle}
 						allowLineInterpolation={allowLineInterpolation}
 						allowShowPoints={allowShowPoints}
+						allowSpanGaps={allowSpanGaps}
+						stepInterval={stepInterval}
 					/>
 				)}
 
@@ -364,6 +390,8 @@ export interface RightContainerProps {
 	setLineStyle: Dispatch<SetStateAction<LineStyle>>;
 	showPoints: boolean;
 	setShowPoints: Dispatch<SetStateAction<boolean>>;
+	spanGaps: boolean | number;
+	setSpanGaps: Dispatch<SetStateAction<boolean | number>>;
 }
 
 RightContainer.defaultProps = {

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

@@ -14,7 +14,6 @@ import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import i18n from 'ReactI18';
 import {
-	fireEvent,
 	getByText as getByTextUtil,
 	render,
 	userEvent,
@@ -342,9 +341,8 @@ describe('Stacking bar in new panel', () => {
 const STACKING_STATE_ATTR = 'data-stacking-state';
 
 describe('when switching to BAR panel type', () => {
-	jest.setTimeout(10000);
-
 	beforeEach(() => {
+		jest.useFakeTimers();
 		jest.clearAllMocks();
 
 		// Mock useSearchParams to return the expected values
@@ -354,7 +352,15 @@ describe('when switching to BAR panel type', () => {
 		]);
 	});
 
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
 	it('should preserve saved stacking value of true', async () => {
+		const user = userEvent.setup({
+			advanceTimers: jest.advanceTimersByTime.bind(jest),
+		});
+
 		const { getByTestId, getByText, container } = render(
 			<DashboardProvider dashboardId="">
 				<NewWidget
@@ -370,7 +376,7 @@ describe('when switching to BAR panel type', () => {
 			'true',
 		);
 
-		await userEvent.click(getByText('Bar')); // Panel Type Selected
+		await user.click(getByText('Bar')); // Panel Type Selected
 
 		// find dropdown with - .ant-select-dropdown
 		const panelDropdown = document.querySelector(
@@ -380,7 +386,7 @@ describe('when switching to BAR panel type', () => {
 
 		// Select TimeSeries from dropdown
 		const option = within(panelDropdown).getByText('Time Series');
-		fireEvent.click(option);
+		await user.click(option);
 
 		expect(getByTestId('panel-change-select')).toHaveAttribute(
 			STACKING_STATE_ATTR,
@@ -395,7 +401,7 @@ describe('when switching to BAR panel type', () => {
 		expect(panelTypeDropdown2).toBeInTheDocument();
 
 		expect(getByTextUtil(panelTypeDropdown2, 'Time Series')).toBeInTheDocument();
-		fireEvent.click(getByTextUtil(panelTypeDropdown2, 'Time Series'));
+		await user.click(getByTextUtil(panelTypeDropdown2, 'Time Series'));
 
 		// find dropdown with - .ant-select-dropdown
 		const panelDropdown2 = document.querySelector(
@@ -403,7 +409,7 @@ describe('when switching to BAR panel type', () => {
 		) as HTMLElement;
 		// // Select BAR from dropdown
 		const BarOption = within(panelDropdown2).getByText('Bar');
-		fireEvent.click(BarOption);
+		await user.click(BarOption);
 
 		// Stack series should be true
 		checkStackSeriesState(container, true);

frontend/src/container/NewWidget/index.tsx

@@ -220,6 +220,9 @@ function NewWidget({
 	const [showPoints, setShowPoints] = useState<boolean>(
 		selectedWidget?.showPoints ?? false,
 	);
+	const [spanGaps, setSpanGaps] = useState<boolean | number>(
+		selectedWidget?.spanGaps ?? true,
+	);
 	const [customLegendColors, setCustomLegendColors] = useState<
 		Record<string, string>
 	>(selectedWidget?.customLegendColors || {});
@@ -289,6 +292,7 @@ function NewWidget({
 				fillMode,
 				lineStyle,
 				showPoints,
+				spanGaps,
 				columnUnits,
 				bucketCount,
 				stackedBarChart,
@@ -328,6 +332,7 @@ function NewWidget({
 		fillMode,
 		lineStyle,
 		showPoints,
+		spanGaps,
 		customLegendColors,
 		contextLinks,
 		selectedWidget.columnWidths,
@@ -541,6 +546,7 @@ function NewWidget({
 								softMin: selectedWidget?.softMin || 0,
 								softMax: selectedWidget?.softMax || 0,
 								fillSpans: selectedWidget?.fillSpans,
+								spanGaps: selectedWidget?.spanGaps ?? true,
 								isLogScale: selectedWidget?.isLogScale || false,
 								bucketWidth: selectedWidget?.bucketWidth || 0,
 								bucketCount: selectedWidget?.bucketCount || 0,
@@ -572,6 +578,7 @@ function NewWidget({
 								softMin: selectedWidget?.softMin || 0,
 								softMax: selectedWidget?.softMax || 0,
 								fillSpans: selectedWidget?.fillSpans,
+								spanGaps: selectedWidget?.spanGaps ?? true,
 								isLogScale: selectedWidget?.isLogScale || false,
 								bucketWidth: selectedWidget?.bucketWidth || 0,
 								bucketCount: selectedWidget?.bucketCount || 0,
@@ -889,6 +896,8 @@ function NewWidget({
 							setLineStyle={setLineStyle}
 							showPoints={showPoints}
 							setShowPoints={setShowPoints}
+							spanGaps={spanGaps}
+							setSpanGaps={setSpanGaps}
 							opacity={opacity}
 							yAxisUnit={yAxisUnit}
 							columnUnits={columnUnits}

frontend/src/lib/uPlotV2/components/UPlotChart/UPlotChart.tsx

@@ -6,8 +6,9 @@ import { LineChart } from 'lucide-react';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import uPlot, { AlignedData, Options } from 'uplot';
 
-import { usePlotContext } from '../context/PlotContext';
-import { UPlotChartProps } from './types';
+import { usePlotContext } from '../../context/PlotContext';
+import { UPlotChartProps } from '../types';
+import { prepareAlignedData } from './utils';
 
 /**
  * Check if dimensions have changed
@@ -83,8 +84,11 @@ export default function UPlotChart({
 			...configOptions,
 		} as Options;
 
+		// prepare final AlignedData
+		const preparedData = prepareAlignedData({ data, config });
+
 		// Create new plot instance
-		const plot = new uPlot(plotConfig, data as AlignedData, containerRef.current);
+		const plot = new uPlot(plotConfig, preparedData, containerRef.current);
 
 		if (plotRef) {
 			plotRef(plot);
@@ -162,7 +166,8 @@ export default function UPlotChart({
 		}
 		// Update data if only data changed
 		else if (!sameData(prevProps, currentProps) && plotInstanceRef.current) {
-			plotInstanceRef.current.setData(data as AlignedData);
+			const preparedData = prepareAlignedData({ data, config });
+			plotInstanceRef.current.setData(preparedData as AlignedData);
 		}
 
 		prevPropsRef.current = currentProps;

frontend/src/lib/uPlotV2/components/UPlotChart/utils.ts

@@ -0,0 +1,16 @@
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { applySpanGapsToAlignedData } from 'lib/uPlotV2/utils/dataUtils';
+import { AlignedData } from 'uplot';
+
+export function prepareAlignedData({
+	data,
+	config,
+}: {
+	data: AlignedData;
+	config: UPlotConfigBuilder;
+}): AlignedData {
+	const seriesSpanGaps = config.getSeriesSpanGapsOptions();
+	return seriesSpanGaps.length > 0
+		? applySpanGapsToAlignedData(data as AlignedData, seriesSpanGaps)
+		: (data as AlignedData);
+}

frontend/src/lib/uPlotV2/components/__tests__/UPlotChart.test.tsx

@@ -4,7 +4,7 @@ import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import type { AlignedData } from 'uplot';
 
 import { PlotContextProvider } from '../../context/PlotContext';
-import UPlotChart from '../UPlotChart';
+import UPlotChart from '../UPlotChart/UPlotChart';
 
 // ---------------------------------------------------------------------------
 // Mocks
@@ -86,6 +86,7 @@ const createMockConfig = (): UPlotConfigBuilder => {
 		}),
 		getId: jest.fn().mockReturnValue(undefined),
 		getShouldSaveSelectionPreference: jest.fn().mockReturnValue(false),
+		getSeriesSpanGapsOptions: jest.fn().mockReturnValue([]),
 	} as unknown) as UPlotConfigBuilder;
 };
 
@@ -328,6 +329,78 @@ describe('UPlotChart', () => {
 		});
 	});
 
+	describe('spanGaps data transformation', () => {
+		it('inserts null break points before passing data to uPlot when a gap exceeds the numeric threshold', () => {
+			const config = createMockConfig();
+			// gap 0→100 = 100 > threshold 50 → null inserted at midpoint x=50
+			(config.getSeriesSpanGapsOptions as jest.Mock).mockReturnValue([
+				{ spanGaps: 50 },
+			]);
+			const data: AlignedData = [
+				[0, 100],
+				[1, 2],
+			];
+
+			render(<UPlotChart config={config} data={data} width={600} height={400} />, {
+				wrapper: Wrapper,
+			});
+
+			const [, receivedData] = mockUPlotConstructor.mock.calls[0];
+			expect(receivedData[0]).toEqual([0, 50, 100]);
+			expect(receivedData[1]).toEqual([1, null, 2]);
+		});
+
+		it('passes data through unchanged when no gap exceeds the numeric threshold', () => {
+			const config = createMockConfig();
+			// all gaps = 10, threshold = 50 → no insertions, same reference returned
+			(config.getSeriesSpanGapsOptions as jest.Mock).mockReturnValue([
+				{ spanGaps: 50 },
+			]);
+			const data: AlignedData = [
+				[0, 10, 20],
+				[1, 2, 3],
+			];
+
+			render(<UPlotChart config={config} data={data} width={600} height={400} />, {
+				wrapper: Wrapper,
+			});
+
+			const [, receivedData] = mockUPlotConstructor.mock.calls[0];
+			expect(receivedData).toBe(data);
+		});
+
+		it('transforms data passed to setData when data updates and a new gap exceeds the threshold', () => {
+			const config = createMockConfig();
+			(config.getSeriesSpanGapsOptions as jest.Mock).mockReturnValue([
+				{ spanGaps: 50 },
+			]);
+
+			// initial render: gap 10 < 50, no transformation
+			const initialData: AlignedData = [
+				[0, 10],
+				[1, 2],
+			];
+			// updated data: gap 100 > 50 → null inserted at midpoint x=50
+			const newData: AlignedData = [
+				[0, 100],
+				[3, 4],
+			];
+
+			const { rerender } = render(
+				<UPlotChart config={config} data={initialData} width={600} height={400} />,
+				{ wrapper: Wrapper },
+			);
+
+			rerender(
+				<UPlotChart config={config} data={newData} width={600} height={400} />,
+			);
+
+			const receivedData = instances[0].setData.mock.calls[0][0];
+			expect(receivedData[0]).toEqual([0, 50, 100]);
+			expect(receivedData[1]).toEqual([3, null, 4]);
+		});
+	});
+
 	describe('prop updates', () => {
 		it('calls setData without recreating the plot when only data changes', () => {
 			const config = createMockConfig();

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

@@ -14,6 +14,7 @@ import {
 	STEP_INTERVAL_MULTIPLIER,
 } from '../constants';
 import { calculateWidthBasedOnStepInterval } from '../utils';
+import { SeriesSpanGapsOption } from '../utils/dataUtils';
 import {
 	ConfigBuilder,
 	ConfigBuilderProps,
@@ -161,6 +162,13 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		this.series.push(new UPlotSeriesBuilder(props));
 	}
 
+	getSeriesSpanGapsOptions(): SeriesSpanGapsOption[] {
+		return this.series.map((s) => {
+			const { spanGaps } = s.props;
+			return { spanGaps };
+		});
+	}
+
 	/**
 	 * Add a hook for extensibility
 	 */

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

@@ -4,6 +4,7 @@ import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
 import uPlot, { Series } from 'uplot';
 
 import { generateGradientFill } from '../utils/generateGradientFill';
+import { isolatedPointFilter } from '../utils/seriesPointsFilter';
 import {
 	BarAlignment,
 	ConfigBuilder,
@@ -146,20 +147,8 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}: {
 		resolvedLineColor: string;
 	}): Partial<Series.Points> {
-		const {
-			lineWidth,
-			pointSize,
-			pointsBuilder,
-			pointsFilter,
-			drawStyle,
-			showPoints,
-		} = this.props;
+		const { lineWidth, pointSize, pointsFilter } = this.props;
 
-		/**
-		 * If pointSize is not provided, use the lineWidth * POINT_SIZE_FACTOR
-		 * to determine the point size.
-		 * POINT_SIZE_FACTOR is 2, so the point size will be 2x the line width.
-		 */
 		const resolvedPointSize =
 			pointSize ?? (lineWidth ?? DEFAULT_LINE_WIDTH) * POINT_SIZE_FACTOR;
 
@@ -168,19 +157,39 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			fill: resolvedLineColor,
 			size: resolvedPointSize,
 			filter: pointsFilter || undefined,
+			show: this.resolvePointsShow(),
 		};
 
-		if (pointsBuilder) {
-			pointsConfig.show = pointsBuilder;
-		} else if (drawStyle === DrawStyle.Points) {
-			pointsConfig.show = true;
-		} else {
-			pointsConfig.show = !!showPoints;
+		// When spanGaps is in threshold (numeric) mode, points hidden by default
+		// become invisible when isolated by injected gap-nulls (no line connects
+		// to them). Use a gap-based filter to show only those isolated points as
+		// dots. Do NOT set show=true here — the filter is called with show=false
+		// and returns specific indices to render; setting show=true would cause
+		// uPlot to call filter with show=true which short-circuits the logic and
+		// renders all points.
+		if (this.shouldApplyIsolatedPointFilter(pointsConfig.show)) {
+			pointsConfig.filter = isolatedPointFilter;
 		}
 
 		return pointsConfig;
 	}
 
+	private resolvePointsShow(): Series.Points['show'] {
+		const { pointsBuilder, drawStyle, showPoints } = this.props;
+		if (pointsBuilder) {
+			return pointsBuilder;
+		}
+		if (drawStyle === DrawStyle.Points) {
+			return true;
+		}
+		return !!showPoints;
+	}
+
+	private shouldApplyIsolatedPointFilter(show: Series.Points['show']): boolean {
+		const { drawStyle, pointsFilter } = this.props;
+		return drawStyle === DrawStyle.Line && !pointsFilter && !show;
+	}
+
 	private getLineColor(): string {
 		const { colorMapping, label, lineColor, isDarkMode } = this.props;
 		if (!label) {
@@ -212,7 +221,12 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		return {
 			scale: scaleKey,
 			label,
-			spanGaps: typeof spanGaps === 'boolean' ? spanGaps : false,
+			// When spanGaps is numeric, we always disable uPlot's internal
+			// spanGaps behavior and rely on data-prep to implement the
+			// threshold-based null handling. When spanGaps is boolean we
+			// map it directly. When spanGaps is undefined we fall back to
+			// the default of true.
+			spanGaps: typeof spanGaps === 'number' ? false : spanGaps ?? true,
 			value: (): string => '',
 			pxAlign: true,
 			show,

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

@@ -1,6 +1,7 @@
 import { themeColors } from 'constants/theme';
 import uPlot from 'uplot';
 
+import { isolatedPointFilter } from '../../utils/seriesPointsFilter';
 import type { SeriesProps } from '../types';
 import { DrawStyle, LineInterpolation, LineStyle } from '../types';
 import { POINT_SIZE_FACTOR, UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
@@ -40,6 +41,37 @@ describe('UPlotSeriesBuilder', () => {
 		expect(typeof config.value).toBe('function');
 	});
 
+	it('maps boolean spanGaps directly to uPlot spanGaps', () => {
+		const trueBuilder = new UPlotSeriesBuilder(
+			createBaseProps({
+				spanGaps: true,
+			}),
+		);
+		const falseBuilder = new UPlotSeriesBuilder(
+			createBaseProps({
+				spanGaps: false,
+			}),
+		);
+
+		const trueConfig = trueBuilder.getConfig();
+		const falseConfig = falseBuilder.getConfig();
+
+		expect(trueConfig.spanGaps).toBe(true);
+		expect(falseConfig.spanGaps).toBe(false);
+	});
+
+	it('disables uPlot spanGaps when spanGaps is a number', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				spanGaps: 10000,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.spanGaps).toBe(false);
+	});
+
 	it('uses explicit lineColor when provided, regardless of mapping', () => {
 		const builder = new UPlotSeriesBuilder(
 			createBaseProps({
@@ -284,4 +316,50 @@ describe('UPlotSeriesBuilder', () => {
 
 		expect(config.points?.filter).toBe(pointsFilter);
 	});
+
+	it('assigns isolatedPointFilter and does not force show=true when spanGaps is numeric and no custom filter', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				drawStyle: DrawStyle.Line,
+				spanGaps: 10_000,
+				showPoints: false,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.points?.filter).toBe(isolatedPointFilter);
+		expect(config.points?.show).toBe(false);
+	});
+
+	it('does not assign isolatedPointFilter when a custom pointsFilter is provided alongside numeric spanGaps', () => {
+		const customFilter: uPlot.Series.Points.Filter = jest.fn(() => null);
+
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				drawStyle: DrawStyle.Line,
+				spanGaps: 10_000,
+				pointsFilter: customFilter,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.points?.filter).toBe(customFilter);
+	});
+
+	it('does not assign isolatedPointFilter when showPoints is true even with numeric spanGaps', () => {
+		const builder = new UPlotSeriesBuilder(
+			createBaseProps({
+				drawStyle: DrawStyle.Line,
+				spanGaps: 10_000,
+				showPoints: true,
+			}),
+		);
+
+		const config = builder.getConfig();
+
+		expect(config.points?.filter).toBeUndefined();
+		expect(config.points?.show).toBe(true);
+	});
 });

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

@@ -99,6 +99,11 @@ export interface ScaleProps {
 	distribution?: DistributionType;
 }
 
+export enum DisconnectedValuesMode {
+	Never = 'never',
+	Threshold = 'threshold',
+}
+
 /**
  * Props for configuring a series
  */
@@ -175,7 +180,16 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	pointsFilter?: Series.Points.Filter;
 	pointsBuilder?: Series.Points.Show;
 	show?: boolean;
-	spanGaps?: boolean;
+	/**
+	 * Controls how nulls are treated for this series.
+	 *
+	 * - boolean: mapped directly to uPlot's spanGaps behavior
+	 * - number: interpreted as an X-axis threshold (same unit as ref values),
+	 *           where gaps smaller than this threshold are spanned by
+	 *           converting short null runs to undefined during data prep
+	 *           while uPlot's internal spanGaps is kept disabled.
+	 */
+	spanGaps?: boolean | number;
 	fillColor?: string;
 	fillMode?: FillMode;
 	isDarkMode?: boolean;

frontend/src/lib/uPlotV2/utils/__tests__/dataUtils.test.ts

@@ -1,4 +1,12 @@
-import { isInvalidPlotValue, normalizePlotValue } from '../dataUtils';
+import uPlot from 'uplot';
+
+import {
+	applySpanGapsToAlignedData,
+	insertLargeGapNullsIntoAlignedData,
+	isInvalidPlotValue,
+	normalizePlotValue,
+	SeriesSpanGapsOption,
+} from '../dataUtils';
 
 describe('dataUtils', () => {
 	describe('isInvalidPlotValue', () => {
@@ -59,4 +67,217 @@ describe('dataUtils', () => {
 			expect(normalizePlotValue(42.5)).toBe(42.5);
 		});
 	});
+
+	describe('insertLargeGapNullsIntoAlignedData', () => {
+		it('returns original data unchanged when no gap exceeds the threshold', () => {
+			// all gaps = 10, threshold = 25 → no insertions
+			const data: uPlot.AlignedData = [
+				[0, 10, 20, 30],
+				[1, 2, 3, 4],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 25 }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result).toBe(data);
+		});
+
+		it('does not insert when the gap equals the threshold exactly', () => {
+			// gap = 50, threshold = 50 → condition is gap > threshold, not >=
+			const data: uPlot.AlignedData = [
+				[0, 50],
+				[1, 2],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result).toBe(data);
+		});
+
+		it('inserts a null at the midpoint when a single gap exceeds the threshold', () => {
+			// gap 0→100 = 100 > 50 → insert null at x=50
+			const data: uPlot.AlignedData = [
+				[0, 100],
+				[1, 2],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result[0]).toEqual([0, 50, 100]);
+			expect(result[1]).toEqual([1, null, 2]);
+		});
+
+		it('inserts nulls at every gap that exceeds the threshold', () => {
+			// gaps: 0→100=100, 100→110=10, 110→210=100; threshold=50
+			// → insert at 0→100 and 110→210
+			const data: uPlot.AlignedData = [
+				[0, 100, 110, 210],
+				[1, 2, 3, 4],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result[0]).toEqual([0, 50, 100, 110, 160, 210]);
+			expect(result[1]).toEqual([1, null, 2, 3, null, 4]);
+		});
+
+		it('inserts null for all series at a gap triggered by any one series', () => {
+			// series 0: threshold=50, gap=100 → triggers insertion
+			// series 1: threshold=200, gap=100 → would not trigger alone
+			// result: both series get null at the inserted x because the x-axis is shared
+			const data: uPlot.AlignedData = [
+				[0, 100],
+				[1, 2],
+				[3, 4],
+			];
+			const options: SeriesSpanGapsOption[] = [
+				{ spanGaps: 50 },
+				{ spanGaps: 200 },
+			];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result[0]).toEqual([0, 50, 100]);
+			expect(result[1]).toEqual([1, null, 2]);
+			expect(result[2]).toEqual([3, null, 4]);
+		});
+
+		it('ignores boolean spanGaps options (only numeric values trigger insertion)', () => {
+			const data: uPlot.AlignedData = [
+				[0, 100],
+				[1, 2],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: true }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result).toBe(data);
+		});
+
+		it('returns original data when series options array is empty', () => {
+			const data: uPlot.AlignedData = [
+				[0, 100],
+				[1, 2],
+			];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, []);
+
+			expect(result).toBe(data);
+		});
+
+		it('returns original data when there is only one x point', () => {
+			const data: uPlot.AlignedData = [[0], [1]];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 10 }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result).toBe(data);
+		});
+
+		it('preserves existing null values in the series alongside inserted ones', () => {
+			// original series already has a null; gap 0→100 also triggers insertion
+			const data: uPlot.AlignedData = [
+				[0, 100, 110],
+				[1, null, 2],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
+
+			const result = insertLargeGapNullsIntoAlignedData(data, options);
+
+			expect(result[0]).toEqual([0, 50, 100, 110]);
+			expect(result[1]).toEqual([1, null, null, 2]);
+		});
+	});
+
+	describe('applySpanGapsToAlignedData', () => {
+		const xs: uPlot.AlignedData[0] = [0, 10, 20, 30];
+
+		it('returns original data when there are no series', () => {
+			const data: uPlot.AlignedData = [xs];
+			const result = applySpanGapsToAlignedData(data, []);
+
+			expect(result).toBe(data);
+		});
+
+		it('leaves data unchanged when spanGaps is undefined', () => {
+			const ys = [1, null, 2, null];
+			const data: uPlot.AlignedData = [xs, ys];
+			const options: SeriesSpanGapsOption[] = [{}];
+
+			const result = applySpanGapsToAlignedData(data, options);
+
+			expect(result[1]).toEqual(ys);
+		});
+
+		it('converts nulls to undefined when spanGaps is true', () => {
+			const ys = [1, null, 2, null];
+			const data: uPlot.AlignedData = [xs, ys];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: true }];
+
+			const result = applySpanGapsToAlignedData(data, options);
+
+			expect(result[1]).toEqual([1, undefined, 2, undefined]);
+		});
+
+		it('leaves data unchanged when spanGaps is false', () => {
+			const ys = [1, null, 2, null];
+			const data: uPlot.AlignedData = [xs, ys];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: false }];
+
+			const result = applySpanGapsToAlignedData(data, options);
+
+			expect(result[1]).toEqual(ys);
+		});
+
+		it('inserts a null break point when a gap exceeds the numeric threshold', () => {
+			// gap 0→100 = 100 > 50 → null inserted at midpoint x=50
+			const data: uPlot.AlignedData = [
+				[0, 100, 110],
+				[1, 2, 3],
+			];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 50 }];
+
+			const result = applySpanGapsToAlignedData(data, options);
+
+			expect(result[0]).toEqual([0, 50, 100, 110]);
+			expect(result[1]).toEqual([1, null, 2, 3]);
+		});
+
+		it('returns original data when no gap exceeds the numeric threshold', () => {
+			// all gaps = 10, threshold = 25 → no insertions
+			const data: uPlot.AlignedData = [xs, [1, 2, 3, 4]];
+			const options: SeriesSpanGapsOption[] = [{ spanGaps: 25 }];
+
+			const result = applySpanGapsToAlignedData(data, options);
+
+			expect(result).toBe(data);
+		});
+
+		it('applies both numeric gap insertion and boolean null-to-undefined in one pass', () => {
+			// series 0: spanGaps: 50 → gap 0→100 triggers a null break at midpoint x=50
+			// series 1: spanGaps: true → the inserted null at x=50 becomes undefined,
+			//   so the line spans over it rather than breaking
+			const data: uPlot.AlignedData = [
+				[0, 100],
+				[1, 2],
+				[3, 4],
+			];
+			const options: SeriesSpanGapsOption[] = [
+				{ spanGaps: 50 },
+				{ spanGaps: true },
+			];
+
+			const result = applySpanGapsToAlignedData(data, options);
+
+			// x-axis extended with the inserted midpoint
+			expect(result[0]).toEqual([0, 50, 100]);
+			// series 0: null at midpoint breaks the line
+			expect(result[1]).toEqual([1, null, 2]);
+			// series 1: null at midpoint converted to undefined → line spans over it
+			expect(result[2]).toEqual([3, undefined, 4]);
+		});
+	});
 });

frontend/src/lib/uPlotV2/utils/__tests__/seriesPointsFilter.test.ts

@@ -0,0 +1,251 @@
+import type uPlot from 'uplot';
+
+import {
+	findNearestNonNull,
+	findSandwichedIndices,
+	isolatedPointFilter,
+} from '../seriesPointsFilter';
+
+// ---------------------------------------------------------------------------
+// Minimal uPlot stub — only the surface used by seriesPointsFilter
+// ---------------------------------------------------------------------------
+
+function makeUPlot({
+	xData,
+	yData,
+	idxs,
+	valToPosFn,
+	posToIdxFn,
+}: {
+	xData: number[];
+	yData: (number | null | undefined)[];
+	idxs?: [number, number];
+	valToPosFn?: (val: number) => number;
+	posToIdxFn?: (pos: number) => number;
+}): uPlot {
+	return ({
+		data: [xData, yData],
+		series: [{}, { idxs: idxs ?? [0, yData.length - 1] }],
+		valToPos: jest.fn((val: number) => (valToPosFn ? valToPosFn(val) : val)),
+		posToIdx: jest.fn((pos: number) =>
+			posToIdxFn ? posToIdxFn(pos) : Math.round(pos),
+		),
+	} as unknown) as uPlot;
+}
+
+// ---------------------------------------------------------------------------
+// findNearestNonNull
+// ---------------------------------------------------------------------------
+
+describe('findNearestNonNull', () => {
+	it('returns the right neighbor when left side is null', () => {
+		const yData = [null, null, 42, null];
+		expect(findNearestNonNull(yData, 1)).toBe(2);
+	});
+
+	it('returns the left neighbor when right side is null', () => {
+		const yData = [null, 42, null, null];
+		expect(findNearestNonNull(yData, 2)).toBe(1);
+	});
+
+	it('prefers the right neighbor over the left when both exist at the same distance', () => {
+		const yData = [10, null, 20];
+		// j=1: right (idx 3) is out of bounds (undefined == null), left (idx 1) is null
+		// Actually right (idx 2) exists at j=1
+		expect(findNearestNonNull(yData, 1)).toBe(2);
+	});
+
+	it('returns approxIdx unchanged when no non-null value is found within 100 steps', () => {
+		const yData: (number | null)[] = Array(5).fill(null);
+		expect(findNearestNonNull(yData, 2)).toBe(2);
+	});
+
+	it('handles undefined values the same as null', () => {
+		const yData: (number | null | undefined)[] = [undefined, undefined, 99];
+		expect(findNearestNonNull(yData, 0)).toBe(2);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// findSandwichedIndices
+// ---------------------------------------------------------------------------
+
+describe('findSandwichedIndices', () => {
+	it('returns empty array when no consecutive gaps share a pixel boundary', () => {
+		const gaps = [
+			[0, 10],
+			[20, 30],
+		];
+		const yData = [1, null, null, 2];
+		const u = makeUPlot({ xData: [0, 1, 2, 3], yData });
+		expect(findSandwichedIndices(gaps, yData, u)).toEqual([]);
+	});
+
+	it('returns the index between two gaps that share a pixel boundary', () => {
+		// gaps[0] ends at 10, gaps[1] starts at 10 → sandwiched point at pixel 10
+		const gaps = [
+			[0, 10],
+			[10, 20],
+		];
+		// posToIdx(10) → 2
+		const yData = [null, null, 5, null, null];
+		const u = makeUPlot({ xData: [0, 1, 2, 3, 4], yData, posToIdxFn: () => 2 });
+		expect(findSandwichedIndices(gaps, yData, u)).toEqual([2]);
+	});
+
+	it('scans to nearest non-null when posToIdx lands on a null', () => {
+		// posToIdx returns 2 which is null; nearest non-null is index 3
+		const gaps = [
+			[0, 10],
+			[10, 20],
+		];
+		const yData = [null, null, null, 7, null];
+		const u = makeUPlot({ xData: [0, 1, 2, 3, 4], yData, posToIdxFn: () => 2 });
+		expect(findSandwichedIndices(gaps, yData, u)).toEqual([3]);
+	});
+
+	it('returns multiple indices when several gap pairs share boundaries', () => {
+		// Three consecutive gaps: [0,10], [10,20], [20,30]
+		// → two sandwiched points: between gaps 0-1 at px 10, between gaps 1-2 at px 20
+		const gaps = [
+			[0, 10],
+			[10, 20],
+			[20, 30],
+		];
+		const yData = [null, 1, null, 2, null];
+		const u = makeUPlot({
+			xData: [0, 1, 2, 3, 4],
+			yData,
+			posToIdxFn: (pos) => (pos === 10 ? 1 : 3),
+		});
+		expect(findSandwichedIndices(gaps, yData, u)).toEqual([1, 3]);
+	});
+});
+
+// ---------------------------------------------------------------------------
+// isolatedPointFilter
+// ---------------------------------------------------------------------------
+
+describe('isolatedPointFilter', () => {
+	it('returns null when show is true (normal point rendering active)', () => {
+		const u = makeUPlot({ xData: [0, 1], yData: [1, null] });
+		expect(isolatedPointFilter(u, 1, true, [[0, 10]])).toBeNull();
+	});
+
+	it('returns null when gaps is null', () => {
+		const u = makeUPlot({ xData: [0, 1], yData: [1, null] });
+		expect(isolatedPointFilter(u, 1, false, null)).toBeNull();
+	});
+
+	it('returns null when gaps is empty', () => {
+		const u = makeUPlot({ xData: [0, 1], yData: [1, null] });
+		expect(isolatedPointFilter(u, 1, false, [])).toBeNull();
+	});
+
+	it('returns null when series idxs is undefined', () => {
+		const u = ({
+			data: [
+				[0, 1],
+				[1, null],
+			],
+			series: [{}, { idxs: undefined }],
+			valToPos: jest.fn(() => 0),
+			posToIdx: jest.fn(() => 0),
+		} as unknown) as uPlot;
+		expect(isolatedPointFilter(u, 1, false, [[0, 10]])).toBeNull();
+	});
+
+	it('includes firstIdx when the first gap starts at the first data point pixel', () => {
+		// xData[firstIdx=0] → valToPos → 5; gaps[0][0] === 5 → isolated leading point
+		const xData = [0, 1, 2, 3, 4];
+		const yData = [10, null, null, null, 20];
+		const u = makeUPlot({
+			xData,
+			yData,
+			idxs: [0, 4],
+			valToPosFn: (val) => (val === 0 ? 5 : 40), // firstPos=5, lastPos=40
+		});
+		// gaps[0][0] === 5 (firstPos), gaps last end !== 40
+		const result = isolatedPointFilter(u, 1, false, [
+			[5, 15],
+			[20, 30],
+		]);
+		expect(result).toContain(0); // firstIdx
+	});
+
+	it('includes lastIdx when the last gap ends at the last data point pixel', () => {
+		const xData = [0, 1, 2, 3, 4];
+		const yData = [10, null, null, null, 20];
+		const u = makeUPlot({
+			xData,
+			yData,
+			idxs: [0, 4],
+			valToPosFn: (val) => (val === 0 ? 5 : 40), // firstPos=5, lastPos=40
+		});
+		// gaps last end === 40 (lastPos), gaps[0][0] !== 5
+		const result = isolatedPointFilter(u, 1, false, [
+			[10, 20],
+			[30, 40],
+		]);
+		expect(result).toContain(4); // lastIdx
+	});
+
+	it('includes sandwiched index between two gaps sharing a pixel boundary', () => {
+		const xData = [0, 1, 2, 3, 4];
+		const yData = [null, null, 5, null, null];
+		const u = makeUPlot({
+			xData,
+			yData,
+			idxs: [0, 4],
+			valToPosFn: () => 99, // firstPos/lastPos won't match gap boundaries
+			posToIdxFn: () => 2,
+		});
+		const result = isolatedPointFilter(u, 1, false, [
+			[0, 50],
+			[50, 100],
+		]);
+		expect(result).toContain(2);
+	});
+
+	it('returns null when no isolated points are found', () => {
+		const xData = [0, 1, 2];
+		const yData = [1, 2, 3];
+		const u = makeUPlot({
+			xData,
+			yData,
+			idxs: [0, 2],
+			// firstPos = 10, lastPos = 30 — neither matches any gap boundary
+			valToPosFn: (val) => (val === 0 ? 10 : 30),
+		});
+		// gaps don't share boundaries and don't touch firstPos/lastPos
+		const result = isolatedPointFilter(u, 1, false, [
+			[0, 5],
+			[15, 20],
+		]);
+		expect(result).toBeNull();
+	});
+
+	it('returns all three kinds of isolated points in one pass', () => {
+		// Leading (firstPos=0 === gaps[0][0]), sandwiched (gaps[1] and gaps[2] share 50),
+		// trailing (lastPos=100 === gaps last end)
+		const xData = [0, 1, 2, 3, 4];
+		const yData = [1, null, 2, null, 3];
+		const u = makeUPlot({
+			xData,
+			yData,
+			idxs: [0, 4],
+			valToPosFn: (val) => (val === 0 ? 0 : 100),
+			posToIdxFn: () => 2, // sandwiched point at idx 2
+		});
+		const gaps = [
+			[0, 20],
+			[40, 50],
+			[50, 80],
+			[90, 100],
+		];
+		const result = isolatedPointFilter(u, 1, false, gaps);
+		expect(result).toContain(0); // leading
+		expect(result).toContain(2); // sandwiched
+		expect(result).toContain(4); // trailing
+	});
+});

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

@@ -24,10 +24,10 @@ export function isInvalidPlotValue(value: unknown): boolean {
 		}
 
 		// Try to parse the string as a number
-		const numValue = parseFloat(value);
+		const parsedNumber = parseFloat(value);
 
 		// If parsing failed or resulted in a non-finite number, it's invalid
-		if (Number.isNaN(numValue) || !Number.isFinite(numValue)) {
+		if (Number.isNaN(parsedNumber) || !Number.isFinite(parsedNumber)) {
 			return true;
 		}
 	}
@@ -51,3 +51,178 @@ export function normalizePlotValue(
 	// Already a valid number
 	return value as number;
 }
+
+export interface SeriesSpanGapsOption {
+	spanGaps?: boolean | number;
+}
+
+// Internal type alias: a series value array that may contain nulls/undefineds.
+// uPlot uses null to draw a visible gap and undefined to represent "no sample"
+// (the line continues across undefined points but breaks at null ones).
+type SeriesArray = Array<number | null | undefined>;
+
+/**
+ * Returns true if the given gap size exceeds the numeric spanGaps threshold
+ * of at least one series. Used to decide whether to insert a null break point.
+ */
+function gapExceedsThreshold(
+	gapSize: number,
+	seriesOptions: SeriesSpanGapsOption[],
+): boolean {
+	return seriesOptions.some(
+		({ spanGaps }) =>
+			typeof spanGaps === 'number' && spanGaps > 0 && gapSize > spanGaps,
+	);
+}
+
+/**
+ * For each series with a numeric spanGaps threshold, insert a null data point
+ * between consecutive x timestamps whose gap exceeds the threshold.
+ *
+ * Why: uPlot draws a continuous line between all non-null points. When the
+ * time gap between two consecutive samples is larger than the configured
+ * spanGaps value, we inject a synthetic null at the midpoint so uPlot renders
+ * a visible break instead of a misleading straight line across the gap.
+ *
+ * Because uPlot's AlignedData shares a single x-axis across all series, a null
+ * is inserted for every series at each position where any series needs a break.
+ *
+ * Two-pass approach for performance:
+ *   Pass 1 — count how many nulls will be inserted (no allocations).
+ *   Pass 2 — fill pre-allocated output arrays by index (no push/reallocation).
+ */
+export function insertLargeGapNullsIntoAlignedData(
+	data: uPlot.AlignedData,
+	seriesOptions: SeriesSpanGapsOption[],
+): uPlot.AlignedData {
+	const [xValues, ...seriesValues] = data;
+
+	if (
+		!Array.isArray(xValues) ||
+		xValues.length < 2 ||
+		seriesValues.length === 0
+	) {
+		return data;
+	}
+
+	const timestamps = xValues as number[];
+	const totalPoints = timestamps.length;
+
+	// Pass 1: count insertions needed so we know the exact output length.
+	// This lets us pre-allocate arrays rather than growing them dynamically.
+	let insertionCount = 0;
+	for (let i = 0; i < totalPoints - 1; i += 1) {
+		if (gapExceedsThreshold(timestamps[i + 1] - timestamps[i], seriesOptions)) {
+			insertionCount += 1;
+		}
+	}
+
+	// No gaps exceed any threshold — return the original data unchanged.
+	if (insertionCount === 0) {
+		return data;
+	}
+
+	// Pass 2: build output arrays of exact size and fill them.
+	// `writeIndex` is the write cursor into the output arrays.
+	const outputLen = totalPoints + insertionCount;
+	const newX = new Array<number>(outputLen);
+	const newSeries: SeriesArray[] = seriesValues.map(
+		() => new Array<number | null | undefined>(outputLen),
+	);
+
+	let writeIndex = 0;
+	for (let i = 0; i < totalPoints; i += 1) {
+		// Copy the real data point at position i
+		newX[writeIndex] = timestamps[i];
+		for (
+			let seriesIndex = 0;
+			seriesIndex < seriesValues.length;
+			seriesIndex += 1
+		) {
+			newSeries[seriesIndex][writeIndex] = (seriesValues[
+				seriesIndex
+			] as SeriesArray)[i];
+		}
+		writeIndex += 1;
+
+		// If the gap to the next x timestamp exceeds the threshold, insert a
+		// synthetic null at the midpoint. The midpoint x is placed halfway
+		// between timestamps[i] and timestamps[i+1] (minimum 1 unit past timestamps[i] to stay unique).
+		if (
+			i < totalPoints - 1 &&
+			gapExceedsThreshold(timestamps[i + 1] - timestamps[i], seriesOptions)
+		) {
+			newX[writeIndex] =
+				timestamps[i] +
+				Math.max(1, Math.floor((timestamps[i + 1] - timestamps[i]) / 2));
+			for (
+				let seriesIndex = 0;
+				seriesIndex < seriesValues.length;
+				seriesIndex += 1
+			) {
+				newSeries[seriesIndex][writeIndex] = null; // null tells uPlot to break the line here
+			}
+			writeIndex += 1;
+		}
+	}
+
+	return [newX, ...newSeries] as uPlot.AlignedData;
+}
+
+/**
+ * Apply per-series spanGaps (boolean | number) handling to an aligned dataset.
+ *
+ * spanGaps controls how uPlot handles gaps in a series:
+ *   - boolean true  → convert null → undefined so uPlot spans over every gap
+ *                     (draws a continuous line, skipping missing samples)
+ *   - boolean false → no change; nulls render as visible breaks (default)
+ *   - number        → insert a null break point between any two consecutive
+ *                     timestamps whose difference exceeds the threshold;
+ *                     gaps smaller than the threshold are left as-is
+ *
+ * The input data is expected to be of the form:
+ * [xValues, series1Values, series2Values, ...]
+ */
+export function applySpanGapsToAlignedData(
+	data: uPlot.AlignedData,
+	seriesOptions: SeriesSpanGapsOption[],
+): uPlot.AlignedData {
+	const [xValues, ...seriesValues] = data;
+
+	if (!Array.isArray(xValues) || seriesValues.length === 0) {
+		return data;
+	}
+
+	// Numeric spanGaps: operates on the whole dataset at once because inserting
+	// null break points requires modifying the shared x-axis.
+	const hasNumericSpanGaps = seriesOptions.some(
+		({ spanGaps }) => typeof spanGaps === 'number',
+	);
+	const gapProcessed = hasNumericSpanGaps
+		? insertLargeGapNullsIntoAlignedData(data, seriesOptions)
+		: data;
+
+	// Boolean spanGaps === true: convert null → undefined per series so uPlot
+	// draws a continuous line across missing samples instead of breaking it.
+	// Skip this pass entirely if no series uses spanGaps: true.
+	const hasBooleanTrue = seriesOptions.some(({ spanGaps }) => spanGaps === true);
+	if (!hasBooleanTrue) {
+		return gapProcessed;
+	}
+
+	const [newX, ...newSeries] = gapProcessed;
+	const transformedSeries = newSeries.map((yValues, seriesIndex) => {
+		const { spanGaps } = seriesOptions[seriesIndex] ?? {};
+		if (spanGaps !== true) {
+			// This series doesn't use spanGaps: true — leave it unchanged.
+			return yValues;
+		}
+		// Replace null with undefined: uPlot skips undefined points without
+		// breaking the line, effectively spanning over the gap.
+		return (yValues as SeriesArray).map((pointValue) =>
+			pointValue === null ? undefined : pointValue,
+		) as uPlot.AlignedData[0];
+	});
+
+	return [newX, ...transformedSeries] as uPlot.AlignedData;
+}

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

@@ -0,0 +1,93 @@
+import uPlot from 'uplot';
+
+/**
+ * Scans outward from approxIdx to find the nearest non-null data index.
+ * posToIdx can land on a null when pixel density exceeds 1 point-per-pixel.
+ */
+export function findNearestNonNull(
+	yData: (number | null | undefined)[],
+	approxIdx: number,
+): number {
+	for (let j = 1; j < 100; j++) {
+		if (yData[approxIdx + j] != null) {
+			return approxIdx + j;
+		}
+		if (yData[approxIdx - j] != null) {
+			return approxIdx - j;
+		}
+	}
+	return approxIdx;
+}
+
+/**
+ * Returns data indices of points sandwiched between two consecutive gaps that
+ * share a pixel boundary — meaning a point (or cluster) is isolated between them.
+ */
+export function findSandwichedIndices(
+	gaps: number[][],
+	yData: (number | null | undefined)[],
+	uPlotInstance: uPlot,
+): number[] {
+	const indices: number[] = [];
+	for (let i = 0; i < gaps.length; i++) {
+		const nextGap = gaps[i + 1];
+		if (nextGap && gaps[i][1] === nextGap[0]) {
+			const approxIdx = uPlotInstance.posToIdx(gaps[i][1], true);
+			indices.push(
+				yData[approxIdx] == null ? findNearestNonNull(yData, approxIdx) : approxIdx,
+			);
+		}
+	}
+	return indices;
+}
+
+/**
+ * Points filter that shows data points isolated by gap-nulls (no connecting line).
+ * Used when spanGaps threshold mode injects nulls around gaps — without this,
+ * lone points become invisible because no line connects to them.
+ *
+ * Uses uPlot's gap pixel array rather than checking raw null neighbors in the
+ * data array. Returns an array of data indices (not a bitmask); null = no points.
+ *
+
+ */
+// eslint-disable-next-line max-params
+export function isolatedPointFilter(
+	uPlotInstance: uPlot,
+	seriesIdx: number,
+	show: boolean,
+	gaps?: null | number[][],
+): number[] | null {
+	if (show || !gaps || gaps.length === 0) {
+		return null;
+	}
+
+	const idxs = uPlotInstance.series[seriesIdx].idxs;
+	if (!idxs) {
+		return null;
+	}
+
+	const [firstIdx, lastIdx] = idxs;
+	const xData = uPlotInstance.data[0] as number[];
+	const yData = uPlotInstance.data[seriesIdx] as (number | null | undefined)[];
+
+	// valToPos with canvas=true matches the pixel space used by the gaps array.
+	const firstPos = Math.round(
+		uPlotInstance.valToPos(xData[firstIdx], 'x', true),
+	);
+	const lastPos = Math.round(uPlotInstance.valToPos(xData[lastIdx], 'x', true));
+
+	const filtered: number[] = [];
+
+	if (gaps[0][0] === firstPos) {
+		filtered.push(firstIdx);
+	}
+
+	filtered.push(...findSandwichedIndices(gaps, yData, uPlotInstance));
+
+	if (gaps[gaps.length - 1][1] === lastPos) {
+		filtered.push(lastIdx);
+	}
+
+	return filtered.length ? filtered : null;
+}

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

@@ -141,6 +141,7 @@ export interface IBaseWidget {
 	showPoints?: boolean;
 	lineStyle?: LineStyle;
 	fillMode?: FillMode;
+	spanGaps?: boolean | number;
 }
 export interface Widgets extends IBaseWidget {
 	query: Query;

pkg/query-service/app/clickhouseReader/reader.go

@@ -3945,67 +3945,53 @@ func (r *ClickHouseReader) GetLogAttributeKeys(ctx context.Context, req *v3.Filt
 		instrumentationtypes.CodeNamespace:    "clickhouse-reader",
 		instrumentationtypes.CodeFunctionName: "GetLogAttributeKeys",
 	})
+	var query string
+	var err error
+	var rows driver.Rows
 	var response v3.FilterAttributeKeyResponse
 
-	attributeKeysTable := r.logsDB + "." + r.logsAttributeKeys
-	resourceAttrKeysTable := r.logsDB + "." + r.logsResourceKeys
-
-	var tagTypes []string
-	var tables []string
-	switch req.TagType {
-	case v3.TagTypeTag:
-		tables, tagTypes = []string{attributeKeysTable}, []string{"tag"}
-	case v3.TagTypeResource:
-		tables, tagTypes = []string{resourceAttrKeysTable}, []string{"resource"}
-	case "":
-		tables, tagTypes = []string{attributeKeysTable, resourceAttrKeysTable}, []string{"tag", "resource"}
-	default:
-		return nil, errorsV2.Newf(errorsV2.TypeInvalidInput, errorsV2.CodeInvalidInput, "unsupported tag type: %s", req.TagType)
+	tagTypeFilter := `tag_type != 'logfield'`
+	if req.TagType != "" {
+		tagTypeFilter = fmt.Sprintf(`tag_type != 'logfield' and tag_type = '%s'`, req.TagType)
 	}
 
+	if len(req.SearchText) != 0 {
+		query = fmt.Sprintf("select distinct tag_key, tag_type, tag_data_type from  %s.%s where %s and tag_key ILIKE $1 limit $2", r.logsDB, r.logsTagAttributeTableV2, tagTypeFilter)
+		rows, err = r.db.Query(ctx, query, fmt.Sprintf("%%%s%%", req.SearchText), req.Limit)
+	} else {
+		query = fmt.Sprintf("select distinct tag_key, tag_type, tag_data_type from %s.%s where %s limit $1", r.logsDB, r.logsTagAttributeTableV2, tagTypeFilter)
+		rows, err = r.db.Query(ctx, query, req.Limit)
+	}
+
+	if err != nil {
+		r.logger.Error("Error while executing query", "error", err)
+		return nil, fmt.Errorf("error while executing query: %s", err.Error())
+	}
+	defer rows.Close()
+
 	statements := []model.ShowCreateTableStatement{}
-	stmtQuery := fmt.Sprintf("SHOW CREATE TABLE %s.%s", r.logsDB, r.logsLocalTableName)
-	if err := r.db.Select(ctx, &statements, stmtQuery); err != nil {
-		return nil, errorsV2.Wrapf(err, errorsV2.TypeInternal, errorsV2.CodeInternal, "error while fetching logs schema")
+	query = fmt.Sprintf("SHOW CREATE TABLE %s.%s", r.logsDB, r.logsLocalTableName)
+	err = r.db.Select(ctx, &statements, query)
+	if err != nil {
+		return nil, fmt.Errorf("error while fetching logs schema: %s", err.Error())
 	}
 
-	for i, table := range tables {
-		tagType := tagTypes[i]
-		var query string
-		if len(req.SearchText) != 0 {
-			query = fmt.Sprintf("select distinct name, lower(datatype) from %s where name ILIKE $1 limit $2", table)
-		} else {
-			query = fmt.Sprintf("select distinct name, lower(datatype) from %s limit $1", table)
+	var attributeKey string
+	var attributeDataType string
+	var tagType string
+	for rows.Next() {
+		if err := rows.Scan(&attributeKey, &tagType, &attributeDataType); err != nil {
+			return nil, fmt.Errorf("error while scanning rows: %s", err.Error())
 		}
 
-		var rows driver.Rows
-		var err error
-		if len(req.SearchText) != 0 {
-			rows, err = r.db.Query(ctx, query, fmt.Sprintf("%%%s%%", req.SearchText), req.Limit)
-		} else {
-			rows, err = r.db.Query(ctx, query, req.Limit)
-		}
-		if err != nil {
-			return nil, errorsV2.Wrapf(err, errorsV2.TypeInternal, errorsV2.CodeInternal, "error while executing query")
+		key := v3.AttributeKey{
+			Key:      attributeKey,
+			DataType: v3.AttributeKeyDataType(attributeDataType),
+			Type:     v3.AttributeKeyType(tagType),
+			IsColumn: isColumn(statements[0].Statement, tagType, attributeKey, attributeDataType),
 		}
 
-		for rows.Next() {
-			var keyName string
-			var datatype string
-			if err := rows.Scan(&keyName, &datatype); err != nil {
-				rows.Close()
-				return nil, errorsV2.Wrapf(err, errorsV2.TypeInternal, errorsV2.CodeInternal, "error while scanning rows")
-			}
-
-			key := v3.AttributeKey{
-				Key:      keyName,
-				DataType: v3.AttributeKeyDataType(datatype),
-				Type:     v3.AttributeKeyType(tagType),
-				IsColumn: isColumn(statements[0].Statement, tagType, keyName, datatype),
-			}
-			response.AttributeKeys = append(response.AttributeKeys, key)
-		}
-		rows.Close()
+		response.AttributeKeys = append(response.AttributeKeys, key)
 	}
 
 	// add other attributes only when the tagType is not specified