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

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/BarChart/BarChart.tsx

@@ -10,15 +10,7 @@ import { useBarChartStacking } from '../../hooks/useBarChartStacking';
 import { BarChartProps } from '../types';
 
 export default function BarChart(props: BarChartProps): JSX.Element {
-	const {
-		children,
-		isStackedBarChart,
-		renderTooltip: customRenderTooltip,
-		config,
-		data,
-		pinnedTooltipElement,
-		...rest
-	} = props;
+	const { children, isStackedBarChart, config, data, ...rest } = props;
 
 	const chartData = useBarChartStacking({
 		data,
@@ -28,27 +20,16 @@ export default function BarChart(props: BarChartProps): JSX.Element {
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
-			if (customRenderTooltip) {
-				return customRenderTooltip(props);
-			}
 			const tooltipProps: BarTooltipProps = {
 				...props,
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
 				isStackedBarChart: isStackedBarChart,
-				pinnedTooltipElement,
 			};
 			return <BarChartTooltip {...tooltipProps} />;
 		},
-		[
-			customRenderTooltip,
-			rest.timezone,
-			rest.yAxisUnit,
-			rest.decimalPrecision,
-			isStackedBarChart,
-			pinnedTooltipElement,
-		],
+		[rest.timezone, rest.yAxisUnit, rest.decimalPrecision, isStackedBarChart],
 	);
 
 	return (

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

@@ -13,7 +13,6 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 		children,
 		renderTooltip: customRenderTooltip,
 		isQueriesMerged,
-		pinnedTooltipElement,
 		...rest
 	} = props;
 
@@ -27,17 +26,10 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
-				pinnedTooltipElement,
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},
-		[
-			customRenderTooltip,
-			pinnedTooltipElement,
-			rest.timezone,
-			rest.yAxisUnit,
-			rest.decimalPrecision,
-		],
+		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	return (

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

@@ -9,12 +9,7 @@ import {
 import { TimeSeriesChartProps } from '../types';
 
 export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
-	const {
-		children,
-		renderTooltip: customRenderTooltip,
-		pinnedTooltipElement,
-		...rest
-	} = props;
+	const { children, renderTooltip: customRenderTooltip, ...rest } = props;
 
 	const renderTooltip = useCallback(
 		(props: TooltipRenderArgs): React.ReactNode => {
@@ -26,17 +21,10 @@ export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
-				pinnedTooltipElement,
 			};
 			return <TimeSeriesTooltip {...tooltipProps} />;
 		},
-		[
-			customRenderTooltip,
-			pinnedTooltipElement,
-			rest.timezone,
-			rest.yAxisUnit,
-			rest.decimalPrecision,
-		],
+		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	return (

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

@@ -2,10 +2,7 @@ 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';
-import {
-	DashboardCursorSync,
-	TooltipClickData,
-} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 interface BaseChartProps {
 	width: number;
@@ -16,7 +13,6 @@ interface BaseChartProps {
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
-	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
 	renderTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
 }

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

@@ -18,10 +18,7 @@ export default function Tooltip({
 	uPlotInstance,
 	timezone,
 	content,
-	isPinned,
 	showTooltipHeader = true,
-	pinnedTooltipElement,
-	clickData,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [listHeight, setListHeight] = useState(0);
@@ -75,45 +72,39 @@ export default function Tooltip({
 			)}
 			data-testid="uplot-tooltip-container"
 		>
-			{isPinned && clickData ? (
-				pinnedTooltipElement?.(clickData)
-			) : (
-				<>
-					{showTooltipHeader && (
-						<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
-							<span>{headerTitle}</span>
-						</div>
-					)}
-					<div className="uplot-tooltip-list-container">
-						{tooltipContent.length > 0 ? (
-							<Virtuoso
-								className="uplot-tooltip-list"
-								data-testid="uplot-tooltip-list"
-								data={tooltipContent}
-								style={virtuosoStyle}
-								totalListHeightChanged={setListHeight}
-								itemContent={(_, item): JSX.Element => (
-									<div className="uplot-tooltip-item" data-testid="uplot-tooltip-item">
-										<div
-											className="uplot-tooltip-item-marker"
-											style={{ borderColor: item.color }}
-											data-is-legend-marker={true}
-											data-testid="uplot-tooltip-item-marker"
-										/>
-										<div
-											className="uplot-tooltip-item-content"
-											style={{ color: item.color, fontWeight: item.isActive ? 700 : 400 }}
-											data-testid="uplot-tooltip-item-content"
-										>
-											{item.label}: {item.tooltipValue}
-										</div>
-									</div>
-								)}
-							/>
-						) : null}
-					</div>
-				</>
+			{showTooltipHeader && (
+				<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
+					<span>{headerTitle}</span>
+				</div>
 			)}
+			<div className="uplot-tooltip-list-container">
+				{tooltipContent.length > 0 ? (
+					<Virtuoso
+						className="uplot-tooltip-list"
+						data-testid="uplot-tooltip-list"
+						data={tooltipContent}
+						style={virtuosoStyle}
+						totalListHeightChanged={setListHeight}
+						itemContent={(_, item): JSX.Element => (
+							<div className="uplot-tooltip-item" data-testid="uplot-tooltip-item">
+								<div
+									className="uplot-tooltip-item-marker"
+									style={{ borderColor: item.color }}
+									data-is-legend-marker={true}
+									data-testid="uplot-tooltip-item-marker"
+								/>
+								<div
+									className="uplot-tooltip-item-content"
+									style={{ color: item.color, fontWeight: item.isActive ? 700 : 400 }}
+									data-testid="uplot-tooltip-item-content"
+								>
+									{item.label}: {item.tooltipValue}
+								</div>
+							</div>
+						)}
+					/>
+				) : null}
+			</div>
 		</div>
 	);
 }

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

@@ -6,7 +6,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { render, RenderResult, screen } from 'tests/test-utils';
 import uPlot from 'uplot';
 
-import type { TooltipClickData } from '../../../plugins/TooltipPlugin/types';
 import { TooltipContentItem } from '../../types';
 import Tooltip from '../Tooltip';
 
@@ -93,7 +92,6 @@ function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 		isPinned: false,
 		dismiss: jest.fn(),
 		viaSync: false,
-		clickData: null,
 	} as TooltipTestProps;
 
 	return render(
@@ -207,43 +205,4 @@ describe('Tooltip', () => {
 		// Falls back to content length: 2 items * 38px = 76px
 		expect(list).toHaveStyle({ height: '76px' });
 	});
-
-	it('renders pinned tooltip content when clickData is provided', () => {
-		const uPlotInstance = createUPlotInstance(0);
-
-		const clickData: TooltipClickData = {
-			xValue: 100,
-			yValue: 200,
-			focusedSeries: {
-				seriesIndex: 1,
-				seriesName: 'Series A',
-				value: 10,
-				color: '#ff0000',
-			},
-			clickedDataTimestamp: 100,
-			mouseX: 50,
-			mouseY: 60,
-			absoluteMouseX: 150,
-			absoluteMouseY: 160,
-		};
-
-		const pinnedTooltipElement = jest.fn(
-			(data: TooltipClickData): JSX.Element => (
-				<div data-testid="pinned-tooltip">{`Pinned at ${data.xValue}`}</div>
-			),
-		);
-
-		renderTooltip({
-			uPlotInstance,
-			isPinned: true,
-			clickData,
-			pinnedTooltipElement,
-			content: [createTooltipContent()],
-		});
-
-		expect(pinnedTooltipElement).toHaveBeenCalledWith(clickData);
-		expect(screen.getByTestId('pinned-tooltip')).toBeInTheDocument();
-		expect(screen.queryByTestId('uplot-tooltip-header')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('uplot-tooltip-list')).not.toBeInTheDocument();
-	});
 });

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

@@ -4,7 +4,6 @@ import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
-import { TooltipClickData } from '../plugins/TooltipPlugin/types';
 
 /**
  * Props for the Plot component
@@ -59,7 +58,6 @@ export interface TooltipRenderArgs {
 	isPinned: boolean;
 	dismiss: () => void;
 	viaSync: boolean;
-	clickData: TooltipClickData | null;
 }
 
 export interface BaseTooltipProps {
@@ -68,7 +66,6 @@ export interface BaseTooltipProps {
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	content?: TooltipContentItem[];
-	pinnedTooltipElement?: (clickData: TooltipClickData) => ReactNode;
 }
 
 export interface TimeSeriesTooltipProps

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -1,7 +1,6 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'classnames';
-import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
 import uPlot from 'uplot';
 
 import {
@@ -74,6 +73,11 @@ export default function TooltipPlugin({
 		layoutRef.current?.observer.disconnect();
 		layoutRef.current = createLayoutObserver(layoutRef);
 
+		/**
+		 * Plot lifecycle and GC: viewState uses hasPlot (boolean), not the plot
+		 * reference; clearPlotReferences runs in cleanup so
+		 * detached canvases can be garbage collected.
+		 */
 		// Controller holds the mutable interaction state for this tooltip
 		// instance. It is intentionally *not* React state so uPlot hooks
 		// and DOM listeners can update it freely without triggering a
@@ -81,9 +85,7 @@ export default function TooltipPlugin({
 		const controller: TooltipControllerState = createInitialControllerState();
 
 		/**
-		 * Plot lifecycle and GC: viewState uses hasPlot (boolean), not the plot
-		 * reference; clearPlotReferences runs in cleanup so
-		 * detached canvases can be garbage collected.
+		 * Clear plot references so detached canvases can be garbage collected.
 		 */
 		const clearPlotReferences = (): void => {
 			controller.plot = null;
@@ -155,7 +157,6 @@ export default function TooltipPlugin({
 			const isPinnedBeforeDismiss = controller.pinned;
 			controller.pinned = false;
 			controller.hoverActive = false;
-			controller.clickData = null;
 			const plot = getPlot(controller);
 			if (plot) {
 				plot.setCursor({ left: -10, top: -10 });
@@ -177,7 +178,6 @@ export default function TooltipPlugin({
 				isPinned: controller.pinned,
 				dismiss: dismissTooltip,
 				viaSync: controller.cursorDrivenBySync,
-				clickData: controller.clickData,
 			});
 		}
 
@@ -268,26 +268,6 @@ export default function TooltipPlugin({
 				!controller.pinned &&
 				controller.focusedSeriesIndex != null
 			) {
-				const xValue = plot.posToVal(event.offsetX, 'x');
-				const yValue = plot.posToVal(event.offsetY, 'y');
-				const focusedSeries = getFocusedSeriesAtPosition(event, plot);
-
-				let clickedDataTimestamp = xValue;
-				if (focusedSeries) {
-					clickedDataTimestamp = plot.data[0][plot.posToIdx(event.offsetX)];
-				}
-
-				controller.clickData = {
-					xValue,
-					yValue,
-					focusedSeries,
-					clickedDataTimestamp,
-					mouseX: event.offsetX,
-					mouseY: event.offsetY,
-					absoluteMouseX: event.clientX,
-					absoluteMouseY: event.clientY,
-				};
-
 				setTimeout(() => {
 					controller.pinned = true;
 					scheduleRender(true);

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/tooltipController.ts

@@ -31,7 +31,6 @@ export function createInitialControllerState(): TooltipControllerState {
 		windowWidth: window.innerWidth - WINDOW_OFFSET,
 		windowHeight: window.innerHeight - WINDOW_OFFSET,
 		pendingPinnedUpdate: false,
-		clickData: null,
 	};
 }
 

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/types.ts

@@ -43,22 +43,6 @@ export interface TooltipPluginProps {
 	maxHeight?: number;
 }
 
-export interface TooltipClickData {
-	xValue: number;
-	yValue: number;
-	focusedSeries: {
-		seriesIndex: number;
-		seriesName: string;
-		value: number;
-		color: string;
-	} | null;
-	clickedDataTimestamp: number;
-	mouseX: number;
-	mouseY: number;
-	absoluteMouseX: number;
-	absoluteMouseY: number;
-}
-
 /**
  * Mutable, non-React state that drives tooltip behaviour:
  * - whether the tooltip is active / pinned
@@ -85,9 +69,6 @@ export interface TooltipControllerState {
 	windowWidth: number;
 	windowHeight: number;
 	pendingPinnedUpdate: boolean;
-
-	/** Data about the click that triggered the tooltip */
-	clickData: TooltipClickData | null;
 }
 
 /**

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

@@ -9,12 +9,6 @@ import { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
 import TooltipPlugin from '../TooltipPlugin/TooltipPlugin';
 import { DashboardCursorSync } from '../TooltipPlugin/types';
 
-// Avoid depending on the full uPlot + onClickPlugin behaviour in these tests.
-// We only care that pinning logic runs without throwing, not which series is focused.
-jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
-	getFocusedSeriesAtPosition: jest.fn(() => null),
-}));
-
 // ---------------------------------------------------------------------------
 // Mock helpers
 // ---------------------------------------------------------------------------
@@ -61,21 +55,11 @@ function createFakePlot(): {
 	over: HTMLDivElement;
 	setCursor: jest.Mock<void, [uPlot.Cursor]>;
 	cursor: { event: Record<string, unknown> };
-	posToVal: jest.Mock<number, [value: number]>;
-	posToIdx: jest.Mock<number, []>;
-	data: [number[], number[]];
 } {
-	const over = document.createElement('div');
-
-	// Provide the minimal uPlot surface used by TooltipPlugin's pin logic.
 	return {
-		over,
+		over: document.createElement('div'),
 		setCursor: jest.fn(),
 		cursor: { event: {} },
-		// In real uPlot these map overlay coordinates to data-space values.
-		posToVal: jest.fn((value: number) => value),
-		posToIdx: jest.fn(() => 0),
-		data: [[0], [0]],
 	};
 }
 

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);
+					}
+				}
+			}
+		}
+	}
+}