chore: fix some light mode issues in alerts and services tabs

* chore: made baseconfigbuilder generic to be used across different charts

* chore: updated baseconfigbuilder test

* chore: updated timezone types

* chore: fixed tsc + test

* chore: fixed tsc + test

* chore: fixed tsc + test

* chore: updated config builder types

* chore: updated comment

frontend/src/container/CreateAlertV2/CreateAlertHeader/styles.scss

@@ -179,6 +179,19 @@
 		&__input.description {
 			color: var(--text-ink-300);
 		}
+
+		.ant-btn {
+			color: var(--text-ink-400);
+			background: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300);
+
+			&:hover,
+			&:focus {
+				color: var(--text-ink-500);
+				background: var(--bg-vanilla-200);
+				border-color: var(--bg-vanilla-400);
+			}
+		}
 	}
 
 	.edit-alert-header {

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -1,3 +1,4 @@
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
@@ -8,7 +9,7 @@ interface BaseChartProps {
 	height: number;
 	showTooltip?: boolean;
 	showLegend?: boolean;
-	timezone: string;
+	timezone?: Timezone;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -129,12 +129,12 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					onDestroy={onPlotDestroy}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
 					isStackedBarChart={widget.stackedBarChart ?? false}
+					timezone={timezone}
 				>
 					<ContextMenu
 						coordinates={coordinates}

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

@@ -5,12 +5,7 @@ import { getInitialStackedBands } from 'container/DashboardContainer/visualizati
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DrawStyle,
-	LineInterpolation,
-	LineStyle,
-	VisibilityMode,
-} from 'lib/uPlotV2/config/types';
+import { DrawStyle } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -63,7 +58,12 @@ export function prepareBarPanelConfig({
 	const minStepInterval = Math.min(...Object.values(stepIntervals));
 
 	const builder = buildBaseConfig({
-		widget,
+		id: widget.id,
+		thresholds: widget.thresholds,
+		yAxisUnit: widget.yAxisUnit,
+		softMin: widget.softMin ?? undefined,
+		softMax: widget.softMax ?? undefined,
+		isLogScale: widget.isLogScale,
 		isDarkMode,
 		onClick,
 		onDragSelect,
@@ -98,14 +98,8 @@ export function prepareBarPanelConfig({
 		builder.addSeries({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.BAR,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
-			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
-			showPoints: VisibilityMode.Never,
-			pointSize: 5,
 			isDarkMode,
 			stepInterval: currentStepInterval,
 		});

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx

@@ -100,7 +100,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					syncMode={DashboardCursorSync.Crosshair}
-					timezone={timezone.value}
+					timezone={timezone}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}

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

@@ -154,7 +154,12 @@ export function prepareHistogramPanelConfig({
 	isDarkMode: boolean;
 }): UPlotConfigBuilder {
 	const builder = buildBaseConfig({
-		widget,
+		id: widget.id,
+		thresholds: widget.thresholds,
+		yAxisUnit: widget.yAxisUnit,
+		softMin: widget.softMin ?? undefined,
+		softMax: widget.softMax ?? undefined,
+		isLogScale: widget.isLogScale,
 		isDarkMode,
 		apiResponse,
 		panelMode,
@@ -191,10 +196,8 @@ export function prepareHistogramPanelConfig({
 		builder.addSeries({
 			label: '',
 			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.HISTOGRAM,
+			drawStyle: DrawStyle.Histogram,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
 			barWidthFactor: 1,
 			pointSize: 5,
 			lineColor: '#3f5ecc',
@@ -216,10 +219,8 @@ export function prepareHistogramPanelConfig({
 			builder.addSeries({
 				label: label,
 				scaleKey: 'y',
-				drawStyle: DrawStyle.Bar,
-				panelType: PANEL_TYPES.HISTOGRAM,
+				drawStyle: DrawStyle.Histogram,
 				colorMapping: widget.customLegendColors ?? {},
-				spanGaps: false,
 				barWidthFactor: 1,
 				pointSize: 5,
 				isDarkMode,

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -118,7 +118,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					}}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
+					timezone={timezone}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}

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

@@ -82,7 +82,12 @@ export const prepareUPlotConfig = ({
 	const minStepInterval = Math.min(...Object.values(stepIntervals));
 
 	const builder = buildBaseConfig({
-		widget,
+		id: widget.id,
+		thresholds: widget.thresholds,
+		yAxisUnit: widget.yAxisUnit,
+		softMin: widget.softMin ?? undefined,
+		softMax: widget.softMax ?? undefined,
+		isLogScale: widget.isLogScale,
 		isDarkMode,
 		onClick,
 		onDragSelect,
@@ -120,7 +125,6 @@ export const prepareUPlotConfig = ({
 				: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
-			panelType: PANEL_TYPES.TIME_SERIES,
 		});
 	});
 

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

@@ -1,11 +1,11 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { STEP_INTERVAL_MULTIPLIER } from 'lib/uPlotV2/constants';
-import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 import { PanelMode } from '../../types';
-import { buildBaseConfig } from '../baseConfigBuilder';
+import { BaseConfigBuilderProps, buildBaseConfig } from '../baseConfigBuilder';
 
 jest.mock(
 	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
@@ -27,16 +27,25 @@ jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
 	default: jest.fn().mockReturnValue({ name: 'onClickPlugin' }),
 }));
 
-const createWidget = (overrides: Partial<Widgets> = {}): Widgets =>
-	({
-		id: 'widget-1',
-		yAxisUnit: 'ms',
-		isLogScale: false,
-		softMin: undefined,
-		softMax: undefined,
-		thresholds: [],
-		...overrides,
-	} as Widgets);
+const createBaseConfigBuilderProps = (
+	overrides: Partial<
+		Pick<
+			BaseConfigBuilderProps,
+			'id' | 'yAxisUnit' | 'isLogScale' | 'softMin' | 'softMax' | 'thresholds'
+		>
+	> = {},
+): Pick<
+	BaseConfigBuilderProps,
+	'id' | 'yAxisUnit' | 'isLogScale' | 'softMin' | 'softMax' | 'thresholds'
+> => ({
+	id: 'widget-1',
+	yAxisUnit: 'ms',
+	isLogScale: false,
+	softMin: undefined,
+	softMax: undefined,
+	thresholds: [],
+	...overrides,
+});
 
 const createApiResponse = (
 	overrides: Partial<MetricRangePayloadProps> = {},
@@ -47,7 +56,7 @@ const createApiResponse = (
 	} as MetricRangePayloadProps);
 
 const baseProps = {
-	widget: createWidget(),
+	...createBaseConfigBuilderProps(),
 	apiResponse: createApiResponse(),
 	isDarkMode: true,
 	panelMode: PanelMode.DASHBOARD_VIEW,
@@ -63,14 +72,14 @@ describe('buildBaseConfig', () => {
 		expect(typeof builder.getLegendItems).toBe('function');
 	});
 
-	it('configures builder with widgetId and DASHBOARD_VIEW preferences', () => {
+	it('configures builder with id and DASHBOARD_VIEW preferences', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
 			panelMode: PanelMode.DASHBOARD_VIEW,
-			widget: createWidget({ id: 'my-widget' }),
+			...createBaseConfigBuilderProps({ id: 'my-widget' }),
 		});
 
-		expect(builder.getWidgetId()).toBe('my-widget');
+		expect(builder.getId()).toBe('my-widget');
 		expect(builder.getShouldSaveSelectionPreference()).toBe(true);
 	});
 
@@ -127,7 +136,7 @@ describe('buildBaseConfig', () => {
 	it('configures log scale on y axis when widget.isLogScale is true', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
-			widget: createWidget({ isLogScale: true }),
+			...createBaseConfigBuilderProps({ isLogScale: true }),
 		});
 
 		const config = builder.getConfig();
@@ -171,7 +180,7 @@ describe('buildBaseConfig', () => {
 	it('adds thresholds from widget', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
-			widget: createWidget({
+			...createBaseConfigBuilderProps({
 				thresholds: [
 					{
 						thresholdValue: 80,
@@ -179,7 +188,7 @@ describe('buildBaseConfig', () => {
 						thresholdUnit: 'ms',
 						thresholdLabel: 'High',
 					},
-				] as Widgets['thresholds'],
+				] as ThresholdProps[],
 			}),
 		});
 

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

@@ -1,5 +1,6 @@
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import onClickPlugin, {
 	OnClickPluginOpts,
 } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -9,28 +10,32 @@ import {
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
-import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
 
 import { PanelMode } from '../types';
 
 export interface BaseConfigBuilderProps {
-	widget: Widgets;
+	id: string;
+	thresholds?: ThresholdProps[];
 	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect?: (startTime: number, endTime: number) => void;
 	timezone?: Timezone;
-	panelMode: PanelMode;
+	panelMode?: PanelMode;
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
 	maxTimeScale?: number;
 	stepInterval?: number;
+	isLogScale?: boolean;
+	yAxisUnit?: string;
+	softMin?: number;
+	softMax?: number;
 }
 
 export function buildBaseConfig({
-	widget,
+	id,
 	isDarkMode,
 	onClick,
 	onDragSelect,
@@ -38,9 +43,14 @@ export function buildBaseConfig({
 	timezone,
 	panelMode,
 	panelType,
+	thresholds,
 	minTimeScale,
 	maxTimeScale,
 	stepInterval,
+	isLogScale,
+	yAxisUnit,
+	softMin,
+	softMax,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
 	const tzDate = timezone
 		? (timestamp: number): Date =>
@@ -48,28 +58,27 @@ export function buildBaseConfig({
 		: undefined;
 
 	const builder = new UPlotConfigBuilder({
+		id,
 		onDragSelect,
-		widgetId: widget.id,
 		tzDate,
 		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: [
-			PanelMode.DASHBOARD_VIEW,
-			PanelMode.STANDALONE_VIEW,
-		].includes(panelMode)
-			? SelectionPreferencesSource.LOCAL_STORAGE
+		selectionPreferencesSource: panelMode
+			? [PanelMode.DASHBOARD_VIEW, PanelMode.STANDALONE_VIEW].includes(panelMode)
+				? SelectionPreferencesSource.LOCAL_STORAGE
+				: SelectionPreferencesSource.IN_MEMORY
 			: SelectionPreferencesSource.IN_MEMORY,
 		stepInterval,
 	});
 
 	const thresholdOptions: ThresholdsDrawHookOptions = {
 		scaleKey: 'y',
-		thresholds: (widget.thresholds || []).map((threshold) => ({
+		thresholds: (thresholds || []).map((threshold) => ({
 			thresholdValue: threshold.thresholdValue ?? 0,
 			thresholdColor: threshold.thresholdColor,
 			thresholdUnit: threshold.thresholdUnit,
 			thresholdLabel: threshold.thresholdLabel,
 		})),
-		yAxisUnit: widget.yAxisUnit,
+		yAxisUnit: yAxisUnit,
 	};
 
 	builder.addThresholds(thresholdOptions);
@@ -79,8 +88,8 @@ export function buildBaseConfig({
 		time: true,
 		min: minTimeScale,
 		max: maxTimeScale,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
 			? DistributionType.Logarithmic
 			: DistributionType.Linear,
 	});
@@ -91,11 +100,11 @@ export function buildBaseConfig({
 		time: false,
 		min: undefined,
 		max: undefined,
-		softMin: widget.softMin ?? undefined,
-		softMax: widget.softMax ?? undefined,
+		softMin: softMin,
+		softMax: softMax,
 		thresholds: thresholdOptions,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
 			? DistributionType.Logarithmic
 			: DistributionType.Linear,
 	});
@@ -114,7 +123,7 @@ export function buildBaseConfig({
 		show: true,
 		side: 2,
 		isDarkMode,
-		isLogScale: widget.isLogScale,
+		isLogScale,
 		panelType,
 	});
 
@@ -123,8 +132,8 @@ export function buildBaseConfig({
 		show: true,
 		side: 3,
 		isDarkMode,
-		isLogScale: widget.isLogScale,
-		yAxisUnit: widget.yAxisUnit,
+		isLogScale,
+		yAxisUnit,
 		panelType,
 	});
 

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

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useTimezone } from 'providers/Timezone';
 
 import { TooltipProps } from '../types';
 
@@ -22,6 +23,14 @@ export default function Tooltip({
 	const isDarkMode = useIsDarkMode();
 	const [listHeight, setListHeight] = useState(0);
 	const tooltipContent = content ?? [];
+	const { timezone: userTimezone } = useTimezone();
+
+	const resolvedTimezone = useMemo(() => {
+		if (!timezone) {
+			return userTimezone.value;
+		}
+		return timezone.value;
+	}, [timezone, userTimezone]);
 
 	const headerTitle = useMemo(() => {
 		if (!showTooltipHeader) {
@@ -33,10 +42,10 @@ export default function Tooltip({
 			return null;
 		}
 		return dayjs(data[0][cursorIdx] * 1000)
-			.tz(timezone)
+			.tz(resolvedTimezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [
-		timezone,
+		resolvedTimezone,
 		uPlotInstance.data,
 		uPlotInstance.cursor.idx,
 		showTooltipHeader,

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

@@ -83,7 +83,7 @@ function createUPlotInstance(cursorIdx: number | null): uPlot {
 function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 	const defaultProps: TooltipTestProps = {
 		uPlotInstance: createUPlotInstance(null),
-		timezone: 'UTC',
+		timezone: { value: 'UTC', name: 'UTC', offset: '0', searchIndex: '0' },
 		content: [],
 		showTooltipHeader: true,
 		// TooltipRenderArgs (not used directly in component but required by type)

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

@@ -92,7 +92,7 @@ export default function UPlotChart({
 
 		setPlotContextInitialState({
 			uPlotInstance: plot,
-			widgetId: config.getWidgetId(),
+			id: config.getId(),
 			shouldSaveSelectionPreference: config.getShouldSaveSelectionPreference(),
 		});
 

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

@@ -84,7 +84,7 @@ const createMockConfig = (): UPlotConfigBuilder => {
 			hooks: {},
 			cursor: {},
 		}),
-		getWidgetId: jest.fn().mockReturnValue(undefined),
+		getId: jest.fn().mockReturnValue(undefined),
 		getShouldSaveSelectionPreference: jest.fn().mockReturnValue(false),
 	} as unknown) as UPlotConfigBuilder;
 };

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';
 
@@ -61,7 +62,7 @@ export interface TooltipRenderArgs {
 
 export interface BaseTooltipProps {
 	showTooltipHeader?: boolean;
-	timezone: string;
+	timezone?: Timezone;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	content?: TooltipContentItem[];

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

@@ -74,23 +74,21 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private tzDate: ((timestamp: number) => Date) | undefined;
 
-	private widgetId: string | undefined;
+	private id: string;
 
 	private onDragSelect: (startTime: number, endTime: number) => void;
 
-	constructor(args?: ConfigBuilderProps) {
-		super(args ?? {});
+	constructor(args: ConfigBuilderProps) {
+		super(args);
 		const {
-			widgetId,
+			id,
 			onDragSelect,
 			tzDate,
 			selectionPreferencesSource,
 			shouldSaveSelectionPreference,
 			stepInterval,
 		} = args ?? {};
-		if (widgetId) {
-			this.widgetId = widgetId;
-		}
+		this.id = id;
 
 		if (tzDate) {
 			this.tzDate = tzDate;
@@ -252,10 +250,10 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 	 */
 	private getStoredVisibility(): SeriesVisibilityItem[] | null {
 		if (
-			this.widgetId &&
+			this.id &&
 			this.selectionPreferencesSource === SelectionPreferencesSource.LOCAL_STORAGE
 		) {
-			return getStoredSeriesVisibility(this.widgetId);
+			return getStoredSeriesVisibility(this.id);
 		}
 		return null;
 	}
@@ -378,10 +376,10 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 	}
 
 	/**
-	 * Get the widget id
+	 * Get the id for the builder
 	 */
-	getWidgetId(): string | undefined {
-		return this.widgetId;
+	getId(): string {
+		return this.id;
 	}
 
 	/**

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

@@ -1,4 +1,3 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
@@ -23,6 +22,9 @@ import {
  * Path builders are static and shared across all instances of UPlotSeriesBuilder
  */
 let builders: PathBuilders | null = null;
+
+const DEFAULT_LINE_WIDTH = 2;
+export const POINT_SIZE_FACTOR = 2.5;
 export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	constructor(props: SeriesProps) {
 		super(props);
@@ -53,7 +55,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		const { lineWidth, lineStyle, lineCap, fillColor } = this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: resolvedLineColor,
-			width: lineWidth ?? 2,
+			width: lineWidth ?? DEFAULT_LINE_WIDTH,
 		};
 
 		if (lineStyle === LineStyle.Dashed) {
@@ -66,9 +68,9 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 
 		if (fillColor) {
 			lineConfig.fill = fillColor;
-		} else if (this.props.panelType === PANEL_TYPES.BAR) {
+		} else if (this.props.drawStyle === DrawStyle.Bar) {
 			lineConfig.fill = resolvedLineColor;
-		} else if (this.props.panelType === PANEL_TYPES.HISTOGRAM) {
+		} else if (this.props.drawStyle === DrawStyle.Histogram) {
 			lineConfig.fill = `${resolvedLineColor}40`;
 		}
 
@@ -137,10 +139,19 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			drawStyle,
 			showPoints,
 		} = 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;
+
 		const pointsConfig: Partial<Series.Points> = {
 			stroke: resolvedLineColor,
 			fill: resolvedLineColor,
-			size: !pointSize || pointSize < (lineWidth ?? 2) ? undefined : pointSize,
+			size: resolvedPointSize,
 			filter: pointsFilter || undefined,
 		};
 
@@ -231,7 +242,7 @@ function getPathBuilder({
 		throw new Error('Required uPlot path builders are not available');
 	}
 
-	if (drawStyle === DrawStyle.Bar) {
+	if (drawStyle === DrawStyle.Bar || drawStyle === DrawStyle.Histogram) {
 		const pathBuilders = uPlot.paths;
 		return getBarPathBuilder({
 			pathBuilders,

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

@@ -1,4 +1,3 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import uPlot from 'uplot';
 
 import {
@@ -43,27 +42,27 @@ describe('UPlotConfigBuilder', () => {
 		label: 'Requests',
 		colorMapping: {},
 		drawStyle: DrawStyle.Line,
-		panelType: PANEL_TYPES.TIME_SERIES,
 		...overrides,
 	});
 
 	it('returns correct save selection preference flag from constructor args', () => {
 		const builder = new UPlotConfigBuilder({
+			id: 'widget-123',
 			shouldSaveSelectionPreference: true,
 		});
 
 		expect(builder.getShouldSaveSelectionPreference()).toBe(true);
 	});
 
-	it('returns widgetId from constructor args', () => {
-		const builder = new UPlotConfigBuilder({ widgetId: 'widget-123' });
+	it('returns id from constructor args', () => {
+		const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 
-		expect(builder.getWidgetId()).toBe('widget-123');
+		expect(builder.getId()).toBe('widget-123');
 	});
 
 	it('sets tzDate from constructor and includes it in config', () => {
 		const tzDate = (ts: number): Date => new Date(ts);
-		const builder = new UPlotConfigBuilder({ tzDate });
+		const builder = new UPlotConfigBuilder({ id: 'widget-123', tzDate });
 
 		const config = builder.getConfig();
 
@@ -72,7 +71,7 @@ describe('UPlotConfigBuilder', () => {
 
 	it('does not call onDragSelect for click without drag (width === 0)', () => {
 		const onDragSelect = jest.fn();
-		const builder = new UPlotConfigBuilder({ onDragSelect });
+		const builder = new UPlotConfigBuilder({ id: 'widget-123', onDragSelect });
 
 		const config = builder.getConfig();
 		const setSelectHooks = config.hooks?.setSelect ?? [];
@@ -85,14 +84,15 @@ describe('UPlotConfigBuilder', () => {
 
 		// Simulate uPlot calling the hook
 		const setSelectHook = setSelectHooks[0];
-		setSelectHook!(uplotInstance);
+		expect(setSelectHook).toBeDefined();
+		setSelectHook?.(uplotInstance);
 
 		expect(onDragSelect).not.toHaveBeenCalled();
 	});
 
 	it('calls onDragSelect with start and end times in milliseconds for a drag selection', () => {
 		const onDragSelect = jest.fn();
-		const builder = new UPlotConfigBuilder({ onDragSelect });
+		const builder = new UPlotConfigBuilder({ id: 'widget-123', onDragSelect });
 
 		const config = builder.getConfig();
 		const setSelectHooks = config.hooks?.setSelect ?? [];
@@ -111,7 +111,8 @@ describe('UPlotConfigBuilder', () => {
 		} as unknown) as uPlot;
 
 		const setSelectHook = setSelectHooks[0];
-		setSelectHook!(uplotInstance);
+		expect(setSelectHook).toBeDefined();
+		setSelectHook?.(uplotInstance);
 
 		expect(onDragSelect).toHaveBeenCalledTimes(1);
 		// 100 and 110 seconds converted to milliseconds
@@ -119,7 +120,7 @@ describe('UPlotConfigBuilder', () => {
 	});
 
 	it('adds and removes hooks via addHook, and exposes them through getConfig', () => {
-		const builder = new UPlotConfigBuilder();
+		const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 		const drawHook = jest.fn();
 
 		const remove = builder.addHook('draw', drawHook as uPlot.Hooks.Defs['draw']);
@@ -134,7 +135,7 @@ describe('UPlotConfigBuilder', () => {
 	});
 
 	it('adds axes, scales, and series and wires them into the final config', () => {
-		const builder = new UPlotConfigBuilder();
+		const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 
 		// Add axis and scale
 		builder.addAxis({ scaleKey: 'y', label: 'Requests' });
@@ -170,7 +171,7 @@ describe('UPlotConfigBuilder', () => {
 	});
 
 	it('merges axis when addAxis is called twice with same scaleKey', () => {
-		const builder = new UPlotConfigBuilder();
+		const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 
 		builder.addAxis({ scaleKey: 'y', label: 'Requests' });
 		builder.addAxis({ scaleKey: 'y', label: 'Updated Label', show: false });
@@ -183,7 +184,7 @@ describe('UPlotConfigBuilder', () => {
 	});
 
 	it('merges scale when addScale is called twice with same scaleKey', () => {
-		const builder = new UPlotConfigBuilder();
+		const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 
 		builder.addScale({ scaleKey: 'y', min: 0 });
 		builder.addScale({ scaleKey: 'y', max: 100 });
@@ -204,7 +205,7 @@ describe('UPlotConfigBuilder', () => {
 		]);
 
 		const builder = new UPlotConfigBuilder({
-			widgetId: 'widget-1',
+			id: 'widget-1',
 			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
 		});
 
@@ -231,7 +232,7 @@ describe('UPlotConfigBuilder', () => {
 		]);
 
 		const builder = new UPlotConfigBuilder({
-			widgetId: 'widget-1',
+			id: 'widget-1',
 			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
 		});
 
@@ -269,7 +270,7 @@ describe('UPlotConfigBuilder', () => {
 		]);
 
 		const builder = new UPlotConfigBuilder({
-			widgetId: 'widget-1',
+			id: 'widget-1',
 			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
 		});
 
@@ -302,7 +303,7 @@ describe('UPlotConfigBuilder', () => {
 		]);
 
 		const builder = new UPlotConfigBuilder({
-			widgetId: 'widget-dup',
+			id: 'widget-dup',
 			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
 		});
 
@@ -329,7 +330,7 @@ describe('UPlotConfigBuilder', () => {
 
 	it('does not attempt to read stored visibility when using in-memory preferences', () => {
 		const builder = new UPlotConfigBuilder({
-			widgetId: 'widget-1',
+			id: 'widget-1',
 			selectionPreferencesSource: SelectionPreferencesSource.IN_MEMORY,
 		});
 
@@ -344,7 +345,7 @@ describe('UPlotConfigBuilder', () => {
 	});
 
 	it('adds thresholds only once per scale key', () => {
-		const builder = new UPlotConfigBuilder();
+		const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 
 		const thresholdsOptions = {
 			scaleKey: 'y',
@@ -362,7 +363,7 @@ describe('UPlotConfigBuilder', () => {
 	});
 
 	it('adds multiple thresholds when scale key is different', () => {
-		const builder = new UPlotConfigBuilder();
+		const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 
 		const thresholdsOptions = {
 			scaleKey: 'y',
@@ -383,7 +384,7 @@ describe('UPlotConfigBuilder', () => {
 	});
 
 	it('merges cursor configuration with defaults instead of replacing them', () => {
-		const builder = new UPlotConfigBuilder();
+		const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 
 		builder.setCursor({
 			drag: { setScale: false },
@@ -398,7 +399,7 @@ describe('UPlotConfigBuilder', () => {
 
 	describe('getCursorConfig', () => {
 		it('returns default cursor merged with custom cursor when no stepInterval', () => {
-			const builder = new UPlotConfigBuilder();
+			const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 
 			builder.setCursor({
 				drag: { setScale: false },
@@ -412,7 +413,7 @@ describe('UPlotConfigBuilder', () => {
 		});
 
 		it('returns hover prox as DEFAULT_HOVER_PROXIMITY_VALUE when stepInterval is not set', () => {
-			const builder = new UPlotConfigBuilder();
+			const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 
 			const cursorConfig = builder.getCursorConfig();
 
@@ -424,15 +425,15 @@ describe('UPlotConfigBuilder', () => {
 			const mockWidth = 100;
 			calculateWidthBasedOnStepIntervalMock.mockReturnValue(mockWidth);
 
-			const builder = new UPlotConfigBuilder({ stepInterval });
+			const builder = new UPlotConfigBuilder({ id: 'widget-123', stepInterval });
 			const cursorConfig = builder.getCursorConfig();
 
 			expect(typeof cursorConfig.hover?.prox).toBe('function');
 
 			const uPlotInstance = {} as uPlot;
-			const proxResult = (cursorConfig.hover!.prox as (u: uPlot) => number)(
-				uPlotInstance,
-			);
+			const prox = cursorConfig.hover?.prox as ((u: uPlot) => number) | undefined;
+			expect(prox).toBeDefined();
+			const proxResult = prox ? prox(uPlotInstance) : NaN;
 
 			expect(calculateWidthBasedOnStepIntervalMock).toHaveBeenCalledWith({
 				uPlotInstance,
@@ -443,7 +444,7 @@ describe('UPlotConfigBuilder', () => {
 	});
 
 	it('adds plugins and includes them in config', () => {
-		const builder = new UPlotConfigBuilder();
+		const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 		const plugin: uPlot.Plugin = {
 			opts: (): void => {},
 			hooks: {},
@@ -458,7 +459,7 @@ describe('UPlotConfigBuilder', () => {
 
 	it('sets padding, legend, focus, select, tzDate, bands and includes them in config', () => {
 		const tzDate = (ts: number): Date => new Date(ts);
-		const builder = new UPlotConfigBuilder();
+		const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 
 		const bands: uPlot.Band[] = [{ series: [1, 2], fill: (): string => '#000' }];
 
@@ -480,7 +481,7 @@ describe('UPlotConfigBuilder', () => {
 	});
 
 	it('does not include plugins when none added', () => {
-		const builder = new UPlotConfigBuilder();
+		const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 
 		const config = builder.getConfig();
 
@@ -488,7 +489,7 @@ describe('UPlotConfigBuilder', () => {
 	});
 
 	it('does not include bands when empty', () => {
-		const builder = new UPlotConfigBuilder();
+		const builder = new UPlotConfigBuilder({ id: 'widget-123' });
 
 		const config = builder.getConfig();
 

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

@@ -1,4 +1,3 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import uPlot from 'uplot';
 
@@ -9,7 +8,7 @@ import {
 	LineStyle,
 	VisibilityMode,
 } from '../types';
-import { UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
+import { POINT_SIZE_FACTOR, UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
 
 const createBaseProps = (
 	overrides: Partial<SeriesProps> = {},
@@ -19,7 +18,6 @@ const createBaseProps = (
 	colorMapping: {},
 	drawStyle: DrawStyle.Line,
 	isDarkMode: false,
-	panelType: PANEL_TYPES.TIME_SERIES,
 	...overrides,
 });
 
@@ -137,7 +135,6 @@ describe('UPlotSeriesBuilder', () => {
 		const smallPointsBuilder = new UPlotSeriesBuilder(
 			createBaseProps({
 				lineWidth: 4,
-				pointSize: 2,
 			}),
 		);
 		const largePointsBuilder = new UPlotSeriesBuilder(
@@ -150,7 +147,7 @@ describe('UPlotSeriesBuilder', () => {
 		const smallConfig = smallPointsBuilder.getConfig();
 		const largeConfig = largePointsBuilder.getConfig();
 
-		expect(smallConfig.points?.size).toBeUndefined();
+		expect(smallConfig.points?.size).toBe(4 * POINT_SIZE_FACTOR); // should be lineWidth * POINT_SIZE_FACTOR, when pointSize is not provided
 		expect(largeConfig.points?.size).toBe(4);
 	});
 

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

@@ -34,7 +34,7 @@ export enum SelectionPreferencesSource {
  * Props for configuring the uPlot config builder
  */
 export interface ConfigBuilderProps {
-	widgetId?: string;
+	id: string;
 	onDragSelect?: (startTime: number, endTime: number) => void;
 	tzDate?: uPlot.LocalDateFromUnix;
 	selectionPreferencesSource?: SelectionPreferencesSource;
@@ -112,6 +112,7 @@ export enum DrawStyle {
 	Line = 'line',
 	Points = 'points',
 	Bar = 'bar',
+	Histogram = 'histogram',
 }
 
 export enum LineInterpolation {
@@ -168,7 +169,6 @@ export interface PointsConfig {
 export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	scaleKey: string;
 	label?: string;
-	panelType: PANEL_TYPES;
 	colorMapping: Record<string, string>;
 	drawStyle: DrawStyle;
 	pathBuilder?: Series.PathBuilder;

frontend/src/lib/uPlotV2/context/PlotContext.tsx

@@ -13,7 +13,7 @@ import { updateSeriesVisibilityToLocalStorage } from 'container/DashboardContain
 import type uPlot from 'uplot';
 export interface PlotContextInitialState {
 	uPlotInstance: uPlot | null;
-	widgetId?: string;
+	id?: string;
 	shouldSaveSelectionPreference?: boolean;
 }
 export interface IPlotContext {
@@ -31,17 +31,17 @@ export const PlotContextProvider = ({
 }: PropsWithChildren): JSX.Element => {
 	const uPlotInstanceRef = useRef<uPlot | null>(null);
 	const activeSeriesIndex = useRef<number | undefined>(undefined);
-	const widgetIdRef = useRef<string | undefined>(undefined);
+	const idRef = useRef<string | undefined>(undefined);
 	const shouldSavePreferencesRef = useRef<boolean>(false);
 
 	const setPlotContextInitialState = useCallback(
 		({
 			uPlotInstance,
-			widgetId,
+			id,
 			shouldSaveSelectionPreference,
 		}: PlotContextInitialState): void => {
 			uPlotInstanceRef.current = uPlotInstance;
-			widgetIdRef.current = widgetId;
+			idRef.current = id;
 			activeSeriesIndex.current = undefined;
 			shouldSavePreferencesRef.current = !!shouldSaveSelectionPreference;
 		},
@@ -50,7 +50,7 @@ export const PlotContextProvider = ({
 
 	const syncSeriesVisibilityToLocalStorage = useCallback((): void => {
 		const plot = uPlotInstanceRef.current;
-		if (!plot || !widgetIdRef.current) {
+		if (!plot || !idRef.current) {
 			return;
 		}
 
@@ -61,7 +61,7 @@ export const PlotContextProvider = ({
 			}),
 		);
 
-		updateSeriesVisibilityToLocalStorage(widgetIdRef.current, seriesVisibility);
+		updateSeriesVisibilityToLocalStorage(idRef.current, seriesVisibility);
 	}, []);
 
 	const onToggleSeriesVisibility = useCallback(
@@ -84,7 +84,7 @@ export const PlotContextProvider = ({
 						show: isReset || currentSeriesIndex === seriesIndex,
 					});
 				});
-				if (widgetIdRef.current && shouldSavePreferencesRef.current) {
+				if (idRef.current && shouldSavePreferencesRef.current) {
 					syncSeriesVisibilityToLocalStorage();
 				}
 			});
@@ -104,7 +104,7 @@ export const PlotContextProvider = ({
 				return;
 			}
 			plot.setSeries(seriesIndex, { show: !series.show });
-			if (widgetIdRef.current && shouldSavePreferencesRef.current) {
+			if (idRef.current && shouldSavePreferencesRef.current) {
 				syncSeriesVisibilityToLocalStorage();
 			}
 		},

frontend/src/lib/uPlotV2/context/__tests__/PlotContext.test.tsx

@@ -32,13 +32,13 @@ const createMockPlot = (series: MockSeries[] = []): uPlot =>
 
 interface TestComponentProps {
 	plot?: uPlot;
-	widgetId?: string;
+	id?: string;
 	shouldSaveSelectionPreference?: boolean;
 }
 
 const TestComponent = ({
 	plot,
-	widgetId,
+	id,
 	shouldSaveSelectionPreference,
 }: TestComponentProps): JSX.Element => {
 	const {
@@ -49,17 +49,13 @@ const TestComponent = ({
 		onFocusSeries,
 	} = usePlotContext();
 	const handleInit = (): void => {
-		if (
-			!plot ||
-			!widgetId ||
-			typeof shouldSaveSelectionPreference !== 'boolean'
-		) {
+		if (!plot || !id || typeof shouldSaveSelectionPreference !== 'boolean') {
 			return;
 		}
 
 		setPlotContextInitialState({
 			uPlotInstance: plot,
-			widgetId,
+			id,
 			shouldSaveSelectionPreference,
 		});
 	};
@@ -148,11 +144,7 @@ describe('PlotContext', () => {
 
 		render(
 			<PlotContextProvider>
-				<TestComponent
-					plot={plot}
-					widgetId="widget-123"
-					shouldSaveSelectionPreference
-				/>
+				<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
 			</PlotContextProvider>,
 		);
 
@@ -199,7 +191,7 @@ describe('PlotContext', () => {
 				<PlotContextProvider>
 					<TestComponent
 						plot={plot}
-						widgetId="widget-visibility"
+						id="widget-visibility"
 						shouldSaveSelectionPreference
 					/>
 				</PlotContextProvider>,
@@ -240,7 +232,7 @@ describe('PlotContext', () => {
 				<PlotContextProvider>
 					<TestComponent
 						plot={plot}
-						widgetId="widget-reset"
+						id="widget-reset"
 						shouldSaveSelectionPreference
 					/>
 				</PlotContextProvider>,
@@ -290,7 +282,7 @@ describe('PlotContext', () => {
 				<PlotContextProvider>
 					<TestComponent
 						plot={plot}
-						widgetId="widget-toggle"
+						id="widget-toggle"
 						shouldSaveSelectionPreference
 					/>
 				</PlotContextProvider>,
@@ -316,7 +308,7 @@ describe('PlotContext', () => {
 				<PlotContextProvider>
 					<TestComponent
 						plot={plot}
-						widgetId="widget-missing-series"
+						id="widget-missing-series"
 						shouldSaveSelectionPreference
 					/>
 				</PlotContextProvider>,
@@ -341,7 +333,7 @@ describe('PlotContext', () => {
 				<PlotContextProvider>
 					<TestComponent
 						plot={plot}
-						widgetId="widget-no-persist"
+						id="widget-no-persist"
 						shouldSaveSelectionPreference={false}
 					/>
 				</PlotContextProvider>,
@@ -379,7 +371,7 @@ describe('PlotContext', () => {
 				<PlotContextProvider>
 					<TestComponent
 						plot={plot}
-						widgetId="widget-focus"
+						id="widget-focus"
 						shouldSaveSelectionPreference={false}
 					/>
 				</PlotContextProvider>,

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -40,7 +40,7 @@ class TestConfigBuilder extends UPlotConfigBuilder {
 type ConfigMock = TestConfigBuilder;
 
 function createConfigMock(): ConfigMock {
-	return new TestConfigBuilder();
+	return new TestConfigBuilder({ id: 'test-widget' });
 }
 
 function getHandler(config: ConfigMock, hookName: string): HookHandler {

frontend/src/pages/AlertDetails/AlertDetails.styles.scss

@@ -252,4 +252,23 @@
 			}
 		}
 	}
+
+	.alert-details-v2 {
+		.tabs-and-filters {
+			.ant-tabs {
+				.ant-tabs-tab {
+					.ant-tabs-tab-btn {
+						border: 1px solid var(--bg-vanilla-300);
+						background: var(--bg-vanilla-100);
+						color: var(--text-ink-400) !important;
+
+						&[aria-selected='true'] {
+							background: var(--bg-vanilla-200);
+							color: var(--text-robin-500) !important;
+						}
+					}
+				}
+			}
+		}
+	}
 }

frontend/src/pages/MetricsApplication/MetricsApplication.styles.scss

@@ -24,3 +24,25 @@
 		}
 	}
 }
+
+.lightMode {
+	.service-route-tab {
+		.ant-tabs-nav {
+			&::before {
+				border-bottom: 1px solid var(--bg-vanilla-300);
+			}
+
+			.ant-tabs-nav-wrap {
+				.ant-tabs-nav-list {
+					.ant-tabs-tab {
+						color: var(--text-ink-400);
+					}
+
+					.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+						color: var(--text-robin-500);
+					}
+				}
+			}
+		}
+	}
+}