Merge branch 'test/e2e/alert_data_insert_fixture' into test/e2e/alert_verification_fixture

.github/CODEOWNERS

@@ -132,3 +132,6 @@
 
 /frontend/src/pages/PublicDashboard/ @SigNoz/pulse-frontend
 /frontend/src/container/PublicDashboardContainer/ @SigNoz/pulse-frontend
+
+## UplotV2 
+/frontend/src/lib/uPlotV2/ @SigNoz/pulse-frontend

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

@@ -0,0 +1,131 @@
+import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
+
+export interface ChartDimensions {
+	width: number;
+	height: number;
+	legendWidth: number;
+	legendHeight: number;
+	legendsPerSet: number;
+}
+
+const AVG_CHAR_WIDTH = 8;
+const DEFAULT_AVG_LABEL_LENGTH = 15;
+const LEGEND_GAP = 16;
+const LEGEND_PADDING = 12;
+const LEGEND_LINE_HEIGHT = 36;
+const MAX_LEGEND_WIDTH = 400;
+
+/**
+ * Average text width from series labels (for legendsPerSet).
+ */
+export function calculateAverageLegendWidth(legends: string[]): number {
+	if (legends.length === 0) {
+		return DEFAULT_AVG_LABEL_LENGTH;
+	}
+	const averageLabelLength =
+		legends.reduce((sum, l) => sum + l.length, 0) / legends.length;
+	return averageLabelLength * AVG_CHAR_WIDTH;
+}
+
+/**
+ * Compute how much space to give to the chart area vs. the legend.
+ *
+ * - For a RIGHT legend, we reserve a vertical column on the right and shrink the chart width.
+ * - For a BOTTOM legend, we reserve up to two rows below the chart and shrink the chart height.
+ *
+ * Implementation details (high level):
+ * - Approximates legend item width from label text length, using a fixed average char width.
+ * - RIGHT legend:
+ *   - `legendWidth` is clamped between 150px and min(MAX_LEGEND_WIDTH, 30% of container width).
+ *   - Chart width is `containerWidth - legendWidth`.
+ * - BOTTOM legend:
+ *   - Computes how many items fit per row, then uses at most 2 rows.
+ *   - `legendHeight` is derived from row count, capped by both a fixed pixel max and a % of container height.
+ *   - Chart height is `containerHeight - legendHeight`, never below 0.
+ * - `legendsPerSet` is the number of legend items that fit horizontally, based on the same text-width approximation.
+ *
+ * The returned values are the final chart and legend rectangles (width/height),
+ * plus `legendsPerSet` which hints how many legend items to show per row.
+ */
+export function calculateChartDimensions({
+	containerWidth,
+	containerHeight,
+	legendConfig,
+	seriesLabels,
+}: {
+	containerWidth: number;
+	containerHeight: number;
+	legendConfig: LegendConfig;
+	seriesLabels: string[];
+}): ChartDimensions {
+	// Guard: no space to lay out chart or legend
+	if (containerWidth <= 0 || containerHeight <= 0) {
+		return {
+			width: 0,
+			height: 0,
+			legendWidth: 0,
+			legendHeight: 0,
+			legendsPerSet: 0,
+		};
+	}
+
+	// Approximate width of a single legend item based on label text.
+	const approxLegendItemWidth = calculateAverageLegendWidth(seriesLabels);
+	const legendItemCount = seriesLabels.length;
+
+	if (legendConfig.position === LegendPosition.RIGHT) {
+		const maxRightLegendWidth = Math.min(MAX_LEGEND_WIDTH, containerWidth * 0.3);
+		const rightLegendWidth = Math.min(
+			Math.max(150, approxLegendItemWidth),
+			maxRightLegendWidth,
+		);
+
+		return {
+			width: Math.max(0, containerWidth - rightLegendWidth),
+			height: containerHeight,
+			legendWidth: rightLegendWidth,
+			legendHeight: containerHeight,
+			// Single vertical list on the right.
+			legendsPerSet: 1,
+		};
+	}
+
+	const legendRowHeight = LEGEND_LINE_HEIGHT + LEGEND_PADDING;
+
+	const legendItemWidth = Math.min(approxLegendItemWidth, 400);
+	const legendItemsPerRow = Math.max(
+		1,
+		Math.floor((containerWidth - LEGEND_PADDING * 2) / legendItemWidth),
+	);
+
+	const legendRowCount = Math.min(
+		2,
+		Math.ceil(legendItemCount / legendItemsPerRow),
+	);
+
+	const idealBottomLegendHeight =
+		legendRowCount > 1
+			? legendRowCount * legendRowHeight - LEGEND_PADDING
+			: legendRowHeight;
+
+	const maxAllowedLegendHeight = Math.min(2 * legendRowHeight, 80);
+
+	const bottomLegendHeight = Math.min(
+		idealBottomLegendHeight,
+		maxAllowedLegendHeight,
+	);
+
+	// How many legend items per row in the Legend component.
+	const legendsPerSet = Math.ceil(
+		(containerWidth + LEGEND_GAP) /
+			(Math.min(MAX_LEGEND_WIDTH, approxLegendItemWidth) + LEGEND_GAP),
+	);
+
+	return {
+		width: containerWidth,
+		height: Math.max(0, containerHeight - bottomLegendHeight),
+		legendWidth: containerWidth,
+		legendHeight: bottomLegendHeight,
+		legendsPerSet,
+	};
+}

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.styles.scss

@@ -0,0 +1,22 @@
+.chart-layout {
+	position: relative;
+	display: flex;
+	width: 100%;
+	height: 100%;
+	flex-direction: column;
+
+	&--legend-right {
+		flex-direction: row;
+
+		.chart-layout__legend-wrapper {
+			padding-left: 0 !important;
+			padding-right: 12px !important;
+		}
+	}
+
+	&__legend-wrapper {
+		padding-left: 12px;
+		padding-bottom: 12px;
+		overflow: auto;
+	}
+}

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -0,0 +1,74 @@
+import { useMemo } from 'react';
+import cx from 'classnames';
+import { calculateChartDimensions } from 'container/DashboardContainer/visualization/charts/utils';
+import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+
+import './ChartLayout.styles.scss';
+
+export interface ChartLayoutProps {
+	legendComponent: (legendPerSet: number) => React.ReactNode;
+	children: (props: {
+		chartWidth: number;
+		chartHeight: number;
+	}) => React.ReactNode;
+	layoutChildren?: React.ReactNode;
+	containerWidth: number;
+	containerHeight: number;
+	legendConfig: LegendConfig;
+	config: UPlotConfigBuilder;
+}
+export default function ChartLayout({
+	legendComponent,
+	children,
+	layoutChildren,
+	containerWidth,
+	containerHeight,
+	legendConfig,
+	config,
+}: ChartLayoutProps): JSX.Element {
+	const chartDimensions = useMemo(
+		() => {
+			const legendItemsMap = config.getLegendItems();
+			const seriesLabels = Object.values(legendItemsMap)
+				.map((item) => item.label)
+				.filter((label): label is string => label !== undefined);
+			return calculateChartDimensions({
+				containerWidth,
+				containerHeight,
+				legendConfig,
+				seriesLabels,
+			});
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[containerWidth, containerHeight, legendConfig],
+	);
+
+	return (
+		<div className="chart-layout__container">
+			<div
+				className={cx('chart-layout', {
+					'chart-layout--legend-right':
+						legendConfig.position === LegendPosition.RIGHT,
+				})}
+			>
+				<div className="chart-layout__content">
+					{children({
+						chartWidth: chartDimensions.width,
+						chartHeight: chartDimensions.height,
+					})}
+				</div>
+				<div
+					className="chart-layout__legend-wrapper"
+					style={{
+						height: chartDimensions.legendHeight,
+						width: chartDimensions.legendWidth,
+					}}
+				>
+					{legendComponent(chartDimensions.legendsPerSet)}
+				</div>
+			</div>
+			{layoutChildren}
+		</div>
+	);
+}

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -25,6 +25,7 @@ import {
 } from 'container/NewWidget/RightContainer/timeItems';
 import PanelWrapper from 'container/PanelWrapper/PanelWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
+import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useChartMutable } from 'hooks/useChartMutable';
@@ -79,6 +80,7 @@ function FullView({
 	}, [setCurrentGraphRef]);
 
 	const { selectedDashboard, isDashboardLocked } = useDashboard();
+	const { dashboardVariables } = useDashboardVariables();
 	const { user } = useAppContext();
 
 	const [editWidget] = useComponentPermission(['edit_widget'], user.role);
@@ -114,7 +116,7 @@ function FullView({
 				graphType: getGraphType(selectedPanelType),
 				query: updatedQuery,
 				globalSelectedInterval: globalSelectedTime,
-				variables: getDashboardVariables(selectedDashboard?.data.variables),
+				variables: getDashboardVariables(dashboardVariables),
 				fillGaps: widget.fillSpans,
 				formatForWeb: selectedPanelType === PANEL_TYPES.TABLE,
 				originalGraphType: selectedPanelType,
@@ -125,7 +127,7 @@ function FullView({
 			graphType: PANEL_TYPES.LIST,
 			selectedTime: widget?.timePreferance || 'GLOBAL_TIME',
 			globalSelectedInterval: globalSelectedTime,
-			variables: getDashboardVariables(selectedDashboard?.data.variables),
+			variables: getDashboardVariables(dashboardVariables),
 			tableParams: {
 				pagination: {
 					offset: 0,

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -53,7 +53,7 @@ function GridCardGraph({
 	customOnRowClick,
 	customTimeRangeWindowForCoRelation,
 	enableDrillDown,
-	widgetsHavingDynamicVariables,
+	widgetsByDynamicVariableId,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -226,8 +226,8 @@ function GridCardGraph({
 					? Object.entries(variables).reduce((acc, [id, variable]) => {
 							if (
 								variable.type !== 'DYNAMIC' ||
-								(widgetsHavingDynamicVariables?.[variable.id] &&
-									widgetsHavingDynamicVariables?.[variable.id].includes(widget.id))
+								(widgetsByDynamicVariableId?.[variable.id] &&
+									widgetsByDynamicVariableId?.[variable.id].includes(widget.id))
 							) {
 								return { ...acc, [id]: variable.selectedValue };
 							}

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -4,8 +4,9 @@ import { ToggleGraphProps } from 'components/Graph/types';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
 import { SuccessResponse } from 'types/api';
-import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { QueryData } from 'types/api/widgets/getQuery';
 import uPlot from 'uplot';
@@ -50,7 +51,7 @@ export interface GridCardGraphProps {
 	headerMenuList?: WidgetGraphComponentProps['headerMenuList'];
 	onClickHandler?: OnClickPluginOpts['onClick'];
 	isQueryEnabled: boolean;
-	variables?: Dashboard['data']['variables'];
+	variables?: IDashboardVariables;
 	version?: string;
 	onDragSelect: (start: number, end: number) => void;
 	customOnDragSelect?: (start: number, end: number) => void;
@@ -71,7 +72,7 @@ export interface GridCardGraphProps {
 	customOnRowClick?: (record: RowData) => void;
 	customTimeRangeWindowForCoRelation?: string | undefined;
 	enableDrillDown?: boolean;
-	widgetsHavingDynamicVariables?: Record<string, string[]>;
+	widgetsByDynamicVariableId?: Record<string, string[]>;
 }
 
 export interface GetGraphVisibilityStateOnLegendClickProps {

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -14,8 +14,9 @@ import { QueryParams } from 'constants/query';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { DEFAULT_ROW_NAME } from 'container/DashboardContainer/DashboardDescription/utils';
+import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { createDynamicVariableToWidgetsMap } from 'hooks/dashboard/utils';
+import { useWidgetsByDynamicVariableId } from 'hooks/dashboard/useWidgetsByDynamicVariableId';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -34,7 +35,7 @@ import { useAppContext } from 'providers/App/App';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { sortLayout } from 'providers/Dashboard/util';
 import { UpdateTimeInterval } from 'store/actions';
-import { IDashboardVariable, Widgets } from 'types/api/dashboard/getAll';
+import { Widgets } from 'types/api/dashboard/getAll';
 import { Props } from 'types/api/dashboard/update';
 import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
@@ -79,7 +80,9 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 
-	const { widgets, variables } = data || {};
+	const { widgets } = data || {};
+
+	const { dashboardVariables } = useDashboardVariables();
 
 	const { user } = useAppContext();
 
@@ -99,21 +102,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 		Record<string, { widgets: Layout[]; collapsed: boolean }>
 	>({});
 
-	const widgetsHavingDynamicVariables = useMemo(() => {
-		const dynamicVariables = Object.values(
-			selectedDashboard?.data?.variables || {},
-		)?.filter((variable: IDashboardVariable) => variable.type === 'DYNAMIC');
-
-		const widgets =
-			selectedDashboard?.data?.widgets?.filter(
-				(widget) => widget.panelTypes !== PANEL_GROUP_TYPES.ROW,
-			) || [];
-
-		return createDynamicVariableToWidgetsMap(
-			dynamicVariables,
-			widgets as Widgets[],
-		);
-	}, [selectedDashboard]);
+	const widgetsByDynamicVariableId = useWidgetsByDynamicVariableId();
 
 	useEffect(() => {
 		setCurrentPanelMap(panelMap);
@@ -178,11 +167,11 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 				dashboardId: selectedDashboard?.id,
 				dashboardName: data.title,
 				numberOfPanels: data.widgets?.length,
-				numberOfVariables: Object.keys(data?.variables || {}).length || 0,
+				numberOfVariables: Object.keys(dashboardVariables).length || 0,
 			});
 			logEventCalledRef.current = true;
 		}
-	}, [data, selectedDashboard?.id]);
+	}, [dashboardVariables, data, selectedDashboard?.id]);
 
 	const onSaveHandler = (): void => {
 		if (!selectedDashboard) {
@@ -622,13 +611,13 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 								<GridCard
 									widget={(currentWidget as Widgets) || ({ id, query: {} } as Widgets)}
 									headerMenuList={widgetActions}
-									variables={variables}
+									variables={dashboardVariables}
 									// version={selectedDashboard?.data?.version}
 									version={ENTITY_VERSION_V5}
 									onDragSelect={onDragSelect}
 									dataAvailable={checkIfDataExists}
 									enableDrillDown={enableDrillDown}
-									widgetsHavingDynamicVariables={widgetsHavingDynamicVariables}
+									widgetsByDynamicVariableId={widgetsByDynamicVariableId}
 								/>
 							</Card>
 						</CardContainer>

frontend/src/container/GridCardLayout/useResolveQuery.ts

@@ -1,15 +1,14 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { useMutation } from 'react-query';
 import { useSelector } from 'react-redux';
 import { getSubstituteVars } from 'api/dashboard/substitute_vars';
 import { prepareQueryRangePayloadV5 } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
+import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { AppState } from 'store/reducers';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { getGraphType } from 'utils/getGraphType';
@@ -36,14 +35,9 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 
 	const queryRangeMutation = useMutation(getSubstituteVars);
 
-	const { selectedDashboard } = useDashboard();
-
-	const dynamicVariables = useMemo(
-		() =>
-			Object.values(selectedDashboard?.data?.variables || {})?.filter(
-				(variable: IDashboardVariable) => variable.type === 'DYNAMIC',
-			),
-		[selectedDashboard],
+	const dashboardDynamicVariables = useDashboardVariablesByType(
+		'DYNAMIC',
+		'values',
 	);
 
 	const getUpdatedQuery = useCallback(
@@ -59,7 +53,7 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 				globalSelectedInterval,
 				variables: getDashboardVariables(selectedDashboard?.data?.variables),
 				originalGraphType: widgetConfig.panelTypes,
-				dynamicVariables,
+				dynamicVariables: dashboardDynamicVariables,
 			});
 
 			// Execute query and process results
@@ -68,7 +62,7 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 			// Map query data from API response
 			return mapQueryDataFromApi(queryResult.data.compositeQuery);
 		},
-		[dynamicVariables, globalSelectedInterval, queryRangeMutation],
+		[dashboardDynamicVariables, globalSelectedInterval, queryRangeMutation],
 	);
 
 	return {

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

@@ -1,4 +1,7 @@
 .dashboard-navigation {
+	.run-query-dashboard-btn {
+		min-width: 180px;
+	}
 	.ant-tabs-tab {
 		border: none !important;
 		margin-left: 0px !important;

frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
+import { QueryKey } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Tabs, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -35,8 +36,11 @@ import ClickHouseQueryContainer from './QueryBuilder/clickHouse';
 import PromQLQueryContainer from './QueryBuilder/promQL';
 
 import './QuerySection.styles.scss';
-
-function QuerySection({ selectedGraph }: QueryProps): JSX.Element {
+function QuerySection({
+	selectedGraph,
+	queryRangeKey,
+	isLoadingQueries,
+}: QueryProps): JSX.Element {
 	const {
 		currentQuery,
 		handleRunQuery: handleRunQueryFromQueryBuilder,
@@ -237,7 +241,13 @@ function QuerySection({ selectedGraph }: QueryProps): JSX.Element {
 				tabBarExtraContent={
 					<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
 						<TextToolTip text="This will temporarily save the current query and graph state. This will persist across tab change" />
-						<RunQueryBtn label="Stage & Run Query" onStageRunQuery={handleRunQuery} />
+						<RunQueryBtn
+							className="run-query-dashboard-btn"
+							label="Stage & Run Query"
+							onStageRunQuery={handleRunQuery}
+							isLoadingQueries={isLoadingQueries}
+							queryRangeKey={queryRangeKey}
+						/>
 					</span>
 				}
 				items={items}
@@ -248,6 +258,8 @@ function QuerySection({ selectedGraph }: QueryProps): JSX.Element {
 
 interface QueryProps {
 	selectedGraph: PANEL_TYPES;
+	queryRangeKey?: QueryKey;
+	isLoadingQueries?: boolean;
 }
 
 export default QuerySection;

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

@@ -1,4 +1,5 @@
 import { memo, useEffect } from 'react';
+import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -24,8 +25,8 @@ function LeftContainer({
 	setSelectedTracesFields,
 	selectedWidget,
 	requestData,
-	setRequestData,
 	isLoadingPanelData,
+	setRequestData,
 	setQueryResponse,
 	enableDrillDown = false,
 }: WidgetGraphProps): JSX.Element {
@@ -35,15 +36,20 @@ function LeftContainer({
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
-	const queryResponse = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
-		enabled: !!stagedQuery,
-		queryKey: [
+	const queryRangeKey = useMemo(
+		() => [
 			REACT_QUERY_KEY.GET_QUERY_RANGE,
 			globalSelectedInterval,
 			requestData,
 			minTime,
 			maxTime,
 		],
+		[globalSelectedInterval, requestData, minTime, maxTime],
+	);
+	const queryResponse = useGetQueryRange(requestData, ENTITY_VERSION_V5, {
+		enabled: !!stagedQuery,
+		queryKey: queryRangeKey,
+		keepPreviousData: true,
 	});
 
 	// Update parent component with query response for legend colors
@@ -64,7 +70,11 @@ function LeftContainer({
 				enableDrillDown={enableDrillDown}
 			/>
 			<QueryContainer className="query-section-left-container">
-				<QuerySection selectedGraph={selectedGraph} />
+				<QuerySection
+					selectedGraph={selectedGraph}
+					queryRangeKey={queryRangeKey}
+					isLoadingQueries={queryResponse.isFetching}
+				/>
 				{selectedGraph === PANEL_TYPES.LIST && (
 					<ExplorerColumnsRenderer
 						selectedLogFields={selectedLogFields}

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

@@ -26,6 +26,7 @@ import { PANEL_TYPES, PanelDisplay } from 'constants/queryBuilder';
 import GraphTypes, {
 	ItemsProps,
 } from 'container/DashboardContainer/ComponentsSlider/menuItems';
+import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
@@ -35,7 +36,6 @@ import {
 	Spline,
 	SquareArrowOutUpRight,
 } from 'lucide-react';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { SuccessResponse } from 'types/api';
 import {
 	ColumnUnit,
@@ -131,7 +131,7 @@ function RightContainer({
 	enableDrillDown = false,
 	isNewDashboard,
 }: RightContainerProps): JSX.Element {
-	const { selectedDashboard } = useDashboard();
+	const { dashboardVariables } = useDashboardVariables();
 	const [inputValue, setInputValue] = useState(title);
 	const [autoCompleteOpen, setAutoCompleteOpen] = useState(false);
 	const [cursorPos, setCursorPos] = useState(0);
@@ -173,16 +173,12 @@ function RightContainer({
 
 	const [graphTypes, setGraphTypes] = useState<ItemsProps[]>(GraphTypes);
 
-	// Get dashboard variables
-	const dashboardVariables = useMemo<VariableOption[]>(() => {
-		if (!selectedDashboard?.data?.variables) {
-			return [];
-		}
-		return Object.entries(selectedDashboard.data.variables).map(([, value]) => ({
+	const dashboardVariableOptions = useMemo<VariableOption[]>(() => {
+		return Object.entries(dashboardVariables).map(([, value]) => ({
 			value: value.name || '',
 			label: value.name || '',
 		}));
-	}, [selectedDashboard?.data?.variables]);
+	}, [dashboardVariables]);
 
 	const updateCursorAndDropdown = (value: string, pos: number): void => {
 		setCursorPos(pos);
@@ -274,7 +270,7 @@ function RightContainer({
 			<section className="name-description">
 				<Typography.Text className="typography">Name</Typography.Text>
 				<AutoComplete
-					options={dashboardVariables}
+					options={dashboardVariableOptions}
 					value={inputValue}
 					onChange={onInputChange}
 					onSelect={onSelect}

frontend/src/container/NewWidget/index.tsx

@@ -19,6 +19,7 @@ import {
 import ROUTES from 'constants/routes';
 import { DashboardShortcuts } from 'constants/shortcuts/DashboardShortcuts';
 import { DEFAULT_BUCKET_COUNT } from 'container/PanelWrapper/constants';
+import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -89,6 +90,8 @@ function NewWidget({
 		columnWidths,
 	} = useDashboard();
 
+	const { dashboardVariables } = useDashboardVariables();
+
 	const { t } = useTranslation(['dashboard']);
 
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
@@ -377,7 +380,7 @@ function NewWidget({
 					graphType: PANEL_TYPES.LIST,
 					selectedTime: selectedTime.enum || 'GLOBAL_TIME',
 					globalSelectedInterval: customGlobalSelectedInterval,
-					variables: getDashboardVariables(selectedDashboard?.data.variables),
+					variables: getDashboardVariables(dashboardVariables),
 					tableParams: {
 						pagination: {
 							offset: 0,
@@ -394,7 +397,7 @@ function NewWidget({
 				formatForWeb:
 					getGraphTypeForFormat(selectedGraph || selectedWidget.panelTypes) ===
 					PANEL_TYPES.TABLE,
-				variables: getDashboardVariables(selectedDashboard?.data.variables),
+				variables: getDashboardVariables(dashboardVariables),
 				originalGraphType: selectedGraph || selectedWidget?.panelTypes,
 			};
 		}
@@ -408,7 +411,7 @@ function NewWidget({
 			graphType: selectedGraph,
 			selectedTime: selectedTime.enum || 'GLOBAL_TIME',
 			globalSelectedInterval: customGlobalSelectedInterval,
-			variables: getDashboardVariables(selectedDashboard?.data.variables),
+			variables: getDashboardVariables(dashboardVariables),
 		};
 	});
 

frontend/src/container/QueryBuilder/components/RunQueryBtn/RunQueryBtn.tsx

@@ -1,4 +1,7 @@
+import { useCallback } from 'react';
+import { QueryKey, useIsFetching, useQueryClient } from 'react-query';
 import { Button } from 'antd';
+import cx from 'classnames';
 import {
 	ChevronUp,
 	Command,
@@ -9,35 +12,56 @@ import {
 import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
 
 import './RunQueryBtn.scss';
-
 interface RunQueryBtnProps {
+	className?: string;
 	label?: string;
 	isLoadingQueries?: boolean;
 	handleCancelQuery?: () => void;
 	onStageRunQuery?: () => void;
+	queryRangeKey?: QueryKey;
 }
 
 function RunQueryBtn({
+	className,
 	label,
 	isLoadingQueries,
 	handleCancelQuery,
 	onStageRunQuery,
+	queryRangeKey,
 }: RunQueryBtnProps): JSX.Element {
 	const isMac = getUserOperatingSystem() === UserOperatingSystem.MACOS;
-	return isLoadingQueries ? (
+	const queryClient = useQueryClient();
+	const isKeyFetchingCount = useIsFetching(
+		queryRangeKey as QueryKey | undefined,
+	);
+	const isLoading =
+		typeof isLoadingQueries === 'boolean'
+			? isLoadingQueries
+			: isKeyFetchingCount > 0;
+
+	const onCancel = useCallback(() => {
+		if (handleCancelQuery) {
+			return handleCancelQuery();
+		}
+		if (queryRangeKey) {
+			queryClient.cancelQueries(queryRangeKey);
+		}
+	}, [handleCancelQuery, queryClient, queryRangeKey]);
+
+	return isLoading ? (
 		<Button
 			type="default"
 			icon={<Loader2 size={14} className="loading-icon animate-spin" />}
-			className="cancel-query-btn periscope-btn danger"
-			onClick={handleCancelQuery}
+			className={cx('cancel-query-btn periscope-btn danger', className)}
+			onClick={onCancel}
 		>
 			Cancel
 		</Button>
 	) : (
 		<Button
 			type="primary"
-			className="run-query-btn periscope-btn primary"
-			disabled={isLoadingQueries || !onStageRunQuery}
+			className={cx('run-query-btn periscope-btn primary', className)}
+			disabled={isLoading || !onStageRunQuery}
 			onClick={onStageRunQuery}
 			icon={<Play size={14} />}
 		>

frontend/src/container/QueryBuilder/components/RunQueryBtn/__test__/RunQueryBtn.test.tsx

@@ -3,6 +3,16 @@ import { fireEvent, render, screen } from '@testing-library/react';
 
 import RunQueryBtn from '../RunQueryBtn';
 
+jest.mock('react-query', () => {
+	const actual = jest.requireActual('react-query');
+	return {
+		...actual,
+		useIsFetching: jest.fn(),
+		useQueryClient: jest.fn(),
+	};
+});
+import { useIsFetching, useQueryClient } from 'react-query';
+
 // Mock OS util
 jest.mock('utils/getUserOS', () => ({
 	getUserOperatingSystem: jest.fn(),
@@ -11,10 +21,43 @@ jest.mock('utils/getUserOS', () => ({
 import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
 
 describe('RunQueryBtn', () => {
-	test('renders run state and triggers on click', () => {
+	beforeEach(() => {
+		jest.resetAllMocks();
 		(getUserOperatingSystem as jest.Mock).mockReturnValue(
 			UserOperatingSystem.MACOS,
 		);
+		(useIsFetching as jest.Mock).mockReturnValue(0);
+		(useQueryClient as jest.Mock).mockReturnValue({
+			cancelQueries: jest.fn(),
+		});
+	});
+
+	test('uses isLoadingQueries prop over useIsFetching', () => {
+		// Simulate fetching but prop forces not loading
+		(useIsFetching as jest.Mock).mockReturnValue(1);
+		const onRun = jest.fn();
+		render(<RunQueryBtn onStageRunQuery={onRun} isLoadingQueries={false} />);
+		// Should show "Run Query" (not cancel)
+		const runBtn = screen.getByRole('button', { name: /run query/i });
+		expect(runBtn).toBeInTheDocument();
+		expect(runBtn).toBeEnabled();
+	});
+
+	test('fallback cancel: uses handleCancelQuery when no key provided', () => {
+		(useIsFetching as jest.Mock).mockReturnValue(0);
+		const cancelQueries = jest.fn();
+		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
+
+		const onCancel = jest.fn();
+		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
+
+		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
+		fireEvent.click(cancelBtn);
+		expect(onCancel).toHaveBeenCalledTimes(1);
+		expect(cancelQueries).not.toHaveBeenCalled();
+	});
+
+	test('renders run state and triggers on click', () => {
 		const onRun = jest.fn();
 		render(<RunQueryBtn onStageRunQuery={onRun} />);
 		const btn = screen.getByRole('button', { name: /run query/i });
@@ -24,17 +67,11 @@ describe('RunQueryBtn', () => {
 	});
 
 	test('disabled when onStageRunQuery is undefined', () => {
-		(getUserOperatingSystem as jest.Mock).mockReturnValue(
-			UserOperatingSystem.MACOS,
-		);
 		render(<RunQueryBtn />);
 		expect(screen.getByRole('button', { name: /run query/i })).toBeDisabled();
 	});
 
 	test('shows cancel state and calls handleCancelQuery', () => {
-		(getUserOperatingSystem as jest.Mock).mockReturnValue(
-			UserOperatingSystem.MACOS,
-		);
 		const onCancel = jest.fn();
 		render(<RunQueryBtn isLoadingQueries handleCancelQuery={onCancel} />);
 		const cancel = screen.getByRole('button', { name: /cancel/i });
@@ -42,10 +79,24 @@ describe('RunQueryBtn', () => {
 		expect(onCancel).toHaveBeenCalledTimes(1);
 	});
 
+	test('derives loading from queryKey via useIsFetching and cancels via queryClient', () => {
+		(useIsFetching as jest.Mock).mockReturnValue(1);
+		const cancelQueries = jest.fn();
+		(useQueryClient as jest.Mock).mockReturnValue({ cancelQueries });
+
+		const queryKey = ['GET_QUERY_RANGE', '1h', { some: 'req' }, 1, 2];
+		render(<RunQueryBtn queryRangeKey={queryKey} />);
+
+		// Button switches to cancel state
+		const cancelBtn = screen.getByRole('button', { name: /cancel/i });
+		expect(cancelBtn).toBeInTheDocument();
+
+		// Clicking cancel calls cancelQueries with the key
+		fireEvent.click(cancelBtn);
+		expect(cancelQueries).toHaveBeenCalledWith(queryKey);
+	});
+
 	test('shows Command + CornerDownLeft on mac', () => {
-		(getUserOperatingSystem as jest.Mock).mockReturnValue(
-			UserOperatingSystem.MACOS,
-		);
 		const { container } = render(
 			<RunQueryBtn onStageRunQuery={(): void => {}} />,
 		);
@@ -70,9 +121,6 @@ describe('RunQueryBtn', () => {
 	});
 
 	test('renders custom label when provided', () => {
-		(getUserOperatingSystem as jest.Mock).mockReturnValue(
-			UserOperatingSystem.MACOS,
-		);
 		const onRun = jest.fn();
 		render(<RunQueryBtn onStageRunQuery={onRun} label="Stage & Run Query" />);
 		expect(

frontend/src/hooks/dashboard/__test__/useGetResolvedText.test.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
 import { renderHook } from '@testing-library/react';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
 
 import useGetResolvedText from '../useGetResolvedText';
 
-// Mock the useDashboard hook
-jest.mock('providers/Dashboard/Dashboard', () => ({
-	useDashboard: function useDashboardMock(): any {
-		return {
-			selectedDashboard: null,
-		};
-	},
+// Create a mock function that we can modify per test
+let mockDashboardVariables: IDashboardVariables = {};
+
+// Mock the useDashboardVariables hook
+jest.mock('hooks/dashboard/useDashboardVariables', () => ({
+	useDashboardVariables: jest.fn(() => ({
+		dashboardVariables: mockDashboardVariables,
+	})),
 }));
 
 describe('useGetResolvedText', () => {
@@ -20,13 +22,35 @@ describe('useGetResolvedText', () => {
 	const TRUNCATED_SERVICE = 'test, app +2';
 	const TEXT_TEMPLATE = 'Logs count in $service.name in $severity';
 
-	const renderHookWithProps = (props: {
-		text: string | React.ReactNode;
-		variables?: Record<string, string | number | boolean>;
-		dashboardVariables?: Record<string, any>;
-		maxLength?: number;
-		matcher?: string;
-	}): any => renderHook(() => useGetResolvedText(props));
+	const renderHookWithProps = (
+		props: {
+			text: string | React.ReactNode;
+			maxLength?: number;
+			matcher?: string;
+		},
+		variables?: Record<string, string | number | boolean>,
+	): any => {
+		if (variables) {
+			mockDashboardVariables = Object.entries(
+				variables,
+			).reduce<IDashboardVariables>((acc, [key, value]) => {
+				acc[key] = {
+					id: key,
+					name: key,
+					description: '',
+					type: 'CUSTOM' as const,
+					sort: 'DISABLED' as const,
+					multiSelect: false,
+					showALLOption: false,
+					selectedValue: value,
+				};
+				return acc;
+			}, {});
+		} else {
+			mockDashboardVariables = {};
+		}
+		return renderHook(() => useGetResolvedText(props));
+	};
 
 	it('should resolve variables with truncated and full text', () => {
 		const text = TEXT_TEMPLATE;
@@ -35,7 +59,7 @@ describe('useGetResolvedText', () => {
 			severity: SEVERITY_VAR,
 		};
 
-		const { result } = renderHookWithProps({ text, variables });
+		const { result } = renderHookWithProps({ text }, variables);
 
 		expect(result.current.truncatedText).toBe(
 			`Logs count in ${TRUNCATED_SERVICE} in DEBUG, INFO`,
@@ -50,7 +74,7 @@ describe('useGetResolvedText', () => {
 			severity: SEVERITY_VAR,
 		};
 
-		const { result } = renderHookWithProps({ text, variables, maxLength: 20 });
+		const { result } = renderHookWithProps({ text, maxLength: 20 }, variables);
 
 		expect(result.current.truncatedText).toBe('Logs count in test, a...');
 		expect(result.current.fullText).toBe(EXPECTED_FULL_TEXT);
@@ -62,7 +86,7 @@ describe('useGetResolvedText', () => {
 			'service.name': SERVICE_VAR,
 		};
 
-		const { result } = renderHookWithProps({ text, variables });
+		const { result } = renderHookWithProps({ text }, variables);
 
 		expect(result.current.truncatedText).toBe(
 			'Logs count in test, app +2 and test, app +2',
@@ -80,7 +104,7 @@ describe('useGetResolvedText', () => {
 			'$dyn-service.name': 'dyn-1, dyn-2',
 		};
 
-		const { result } = renderHookWithProps({ text, variables });
+		const { result } = renderHookWithProps({ text }, variables);
 
 		expect(result.current.truncatedText).toBe(
 			'Logs in test, app +2, test, app +2, test, app +2 - dyn-1, dyn-2',
@@ -97,7 +121,7 @@ describe('useGetResolvedText', () => {
 			severity: SEVERITY_VAR,
 		};
 
-		const { result } = renderHookWithProps({ text, variables, matcher: '#' });
+		const { result } = renderHookWithProps({ text, matcher: '#' }, variables);
 
 		expect(result.current.truncatedText).toBe(
 			'Logs count in test, app +2 in DEBUG, INFO',
@@ -112,7 +136,7 @@ describe('useGetResolvedText', () => {
 			active: true,
 		};
 
-		const { result } = renderHookWithProps({ text, variables });
+		const { result } = renderHookWithProps({ text }, variables);
 
 		expect(result.current.fullText).toBe('Count: 42, Active: true');
 		expect(result.current.truncatedText).toBe('Count: 42, Active: true');
@@ -124,7 +148,7 @@ describe('useGetResolvedText', () => {
 			'service.name': SERVICE_VAR,
 		};
 
-		const { result } = renderHookWithProps({ text, variables });
+		const { result } = renderHookWithProps({ text }, variables);
 
 		expect(result.current.truncatedText).toBe(
 			'Logs count in test, app +2 in $unknown',
@@ -140,10 +164,12 @@ describe('useGetResolvedText', () => {
 			'service.name': SERVICE_VAR,
 		};
 
-		const { result } = renderHookWithProps({
-			text: reactNodeText,
+		const { result } = renderHookWithProps(
+			{
+				text: reactNodeText,
+			},
 			variables,
-		});
+		);
 
 		// Should return the ReactNode unchanged
 		expect(result.current.fullText).toBe(reactNodeText);
@@ -156,10 +182,12 @@ describe('useGetResolvedText', () => {
 			'service.name': SERVICE_VAR,
 		};
 
-		const { result } = renderHookWithProps({
-			text,
+		const { result } = renderHookWithProps(
+			{
+				text,
+			},
 			variables,
-		});
+		);
 
 		// Should return the number unchanged
 		expect(result.current.fullText).toBe(text);
@@ -172,10 +200,12 @@ describe('useGetResolvedText', () => {
 			'service.name': SERVICE_VAR,
 		};
 
-		const { result } = renderHookWithProps({
-			text,
+		const { result } = renderHookWithProps(
+			{
+				text,
+			},
 			variables,
-		});
+		);
 
 		// Should return the boolean unchanged
 		expect(result.current.fullText).toBe(text);
@@ -189,7 +219,7 @@ describe('useGetResolvedText', () => {
 			'config.database.host': 'localhost:5432',
 		};
 
-		const { result } = renderHookWithProps({ text, variables });
+		const { result } = renderHookWithProps({ text }, variables);
 
 		expect(result.current.fullText).toBe('API: /users Config: localhost:5432');
 		expect(result.current.truncatedText).toBe(
@@ -204,7 +234,7 @@ describe('useGetResolvedText', () => {
 			'error.type': 'timeout',
 		};
 
-		const { result } = renderHookWithProps({ text, variables });
+		const { result } = renderHookWithProps({ text }, variables);
 
 		expect(result.current.fullText).toBe('Status: web-api, Error: timeout;');
 		expect(result.current.truncatedText).toBe('Status: web-api, Error: timeout;');

frontend/src/hooks/dashboard/useContextVariables.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -38,20 +38,17 @@ interface ResolvedTextUtilsResult {
 
 function useContextVariables({
 	maxValues = 2,
+	// ! To be noted: This customVariables is not Dashboard Custom Variables
 	customVariables,
 }: UseContextVariablesProps): UseContextVariablesResult {
-	const { selectedDashboard } = useDashboard();
+	const { dashboardVariables } = useDashboardVariables();
 	const globalTime = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
 
 	// Extract dashboard variables
-	const dashboardVariables = useMemo(() => {
-		if (!selectedDashboard?.data?.variables) {
-			return [];
-		}
-
-		return Object.entries(selectedDashboard.data.variables)
+	const processedDashboardVariables = useMemo(() => {
+		return Object.entries(dashboardVariables)
 			.filter(([, value]) => value.name)
 			.map(([, value]) => {
 				let processedValue: string | number | boolean;
@@ -74,7 +71,7 @@ function useContextVariables({
 					originalValue: value.selectedValue,
 				};
 			});
-	}, [selectedDashboard]);
+	}, [dashboardVariables]);
 
 	// Extract global variables
 	const globalVariables = useMemo(
@@ -111,8 +108,12 @@ function useContextVariables({
 
 	// Combine all variables
 	const allVariables = useMemo(
-		() => [...dashboardVariables, ...globalVariables, ...customVariablesList],
-		[dashboardVariables, globalVariables, customVariablesList],
+		() => [
+			...processedDashboardVariables,
+			...globalVariables,
+			...customVariablesList,
+		],
+		[processedDashboardVariables, globalVariables, customVariablesList],
 	);
 
 	// Create processed variables with truncation logic

frontend/src/hooks/dashboard/useGetResolvedText.tsx

@@ -5,7 +5,7 @@
 // return value should be a full text string, and a truncated text string (if max length is provided)
 
 import { ReactNode, useCallback, useMemo } from 'react';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 
 interface UseGetResolvedTextProps {
 	text: string | ReactNode;
@@ -23,23 +23,15 @@ interface ResolvedTextResult {
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function useGetResolvedText({
 	text,
-	variables,
 	maxLength,
 	matcher = '$',
 	maxValues = 2, // Default to showing 2 values before +n more
 }: UseGetResolvedTextProps): ResolvedTextResult {
-	const { selectedDashboard } = useDashboard();
+	const { dashboardVariables } = useDashboardVariables();
 	const isString = typeof text === 'string';
 
 	const processedDashboardVariables = useMemo(() => {
-		if (variables) {
-			return variables;
-		}
-		if (!selectedDashboard?.data.variables) {
-			return {};
-		}
-
-		return Object.entries(selectedDashboard.data.variables).reduce<
+		return Object.entries(dashboardVariables).reduce<
 			Record<string, string | number | boolean>
 		>((acc, [, value]) => {
 			if (!value.name) {
@@ -54,7 +46,7 @@ function useGetResolvedText({
 			}
 			return acc;
 		}, {});
-	}, [variables, selectedDashboard?.data.variables]);
+	}, [dashboardVariables]);
 
 	// Process array values to add +n more notation for truncated text
 	const processedVariables = useMemo(() => {

frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss

@@ -12,6 +12,24 @@
 	&:has(.legend-item-focused) .legend-item.legend-item-focused {
 		opacity: 1;
 	}
+
+	.legend-virtuoso-container {
+		height: 100%;
+		width: 100%;
+
+		&::-webkit-scrollbar {
+			width: 0.3rem;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg-slate-100);
+			border-radius: 0.5rem;
+		}
+	}
 }
 
 .legend-row {
@@ -89,3 +107,13 @@
 		background: rgba(255, 255, 255, 0.05);
 	}
 }
+
+.lightMode {
+	.legend-container {
+		.legend-virtuoso-container {
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-vanilla-400);
+			}
+		}
+	}
+}

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

@@ -36,9 +36,6 @@ export default function Legend({
 	// Chunk legend items into rows of LEGENDS_PER_ROW items each
 	const legendRows = useMemo(() => {
 		const legendItems = Object.values(legendItemsMap);
-		if (legendsPerSet >= legendItems.length) {
-			return [legendItems];
-		}
 
 		return legendItems.reduce((acc: LegendItem[][], curr, i) => {
 			if (i % legendsPerSet === 0) {
@@ -93,10 +90,7 @@ export default function Legend({
 			onMouseLeave={onLegendMouseLeave}
 		>
 			<Virtuoso
-				style={{
-					height: '100%',
-					width: '100%',
-				}}
+				className="legend-virtuoso-container"
 				data={legendRows}
 				itemContent={(index, row): JSX.Element => renderLegendRow(index, row)}
 			/>

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

@@ -68,11 +68,15 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	constructor(args?: ConfigBuilderProps) {
 		super(args ?? {});
-		const { widgetId, onDragSelect } = args ?? {};
+		const { widgetId, onDragSelect, tzDate } = args ?? {};
 		if (widgetId) {
 			this.widgetId = widgetId;
 		}
 
+		if (tzDate) {
+			this.tzDate = tzDate;
+		}
+
 		this.onDragSelect = noop;
 
 		if (onDragSelect) {

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

@@ -25,8 +25,10 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 
 	constructor(props: ScaleProps) {
 		super(props);
-		this.softMin = props.softMin ?? null;
-		this.softMax = props.softMax ?? null;
+		// By default while creating a widget we set the softMin and softMax to 0, so we need to handle this case separately
+		const isDefaultSoftMinMax = props.softMin === 0 && props.softMax === 0;
+		this.softMin = isDefaultSoftMinMax ? null : props.softMin ?? null;
+		this.softMax = isDefaultSoftMinMax ? null : props.softMax ?? null;
 		this.min = props.min ?? null;
 		this.max = props.max ?? null;
 	}
@@ -38,7 +40,7 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			range,
 			thresholds,
 			logBase = 10,
-			padMinBy = 0,
+			padMinBy = 0.1,
 			padMaxBy = 0.1,
 		} = this.props;
 

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

@@ -28,6 +28,7 @@ export abstract class ConfigBuilder<P, T> {
 export interface ConfigBuilderProps {
 	widgetId?: string;
 	onDragSelect?: (startTime: number, endTime: number) => void;
+	tzDate?: uPlot.LocalDateFromUnix;
 }
 
 /**

tests/integration/fixtures/fs.py

@@ -1,5 +1,4 @@
-import os
-from typing import Any, Callable, Generator
+from typing import Any, Generator
 
 import pytest
 
@@ -14,12 +13,3 @@ def tmpfs(
         return tmp_path_factory.mktemp(basename)
 
     yield _tmp
-
-
-@pytest.fixture(scope="package")
-def get_testdata_file_path() -> Callable[[str], str]:
-    def _get_testdata_file_path(file: str) -> str:
-        testdata_dir = os.path.join(os.path.dirname(__file__), "..", "testdata")
-        return os.path.join(testdata_dir, file)
-
-    return _get_testdata_file_path

tests/integration/fixtures/utils.py

@@ -1,4 +1,5 @@
 import datetime
+import os
 from typing import Any
 
 import isodate
@@ -25,3 +26,8 @@ def parse_duration(duration: Any) -> datetime.timedelta:
     if isinstance(duration, datetime.timedelta):
         return duration
     return datetime.timedelta(seconds=duration)
+
+
+def get_testdata_file_path(file: str) -> str:
+    testdata_dir = os.path.join(os.path.dirname(__file__), "..", "testdata")
+    return os.path.join(testdata_dir, file)