fix: query-less panels not allowed

frontend/.oxfmtrc.json

@@ -23,11 +23,6 @@
     "**/*.md",
     "**/*.json",
     "src/parser/**",
-    "src/TraceOperator/parser/**",
-    ".claude",
-    ".opencode",
-    "dist",
-    "playwright-report",
-    ".temp_cache"
+    "src/TraceOperator/parser/**"
   ]
 }

frontend/package.json

@@ -232,7 +232,6 @@
     "ts-jest": "29.4.6",
     "ts-node": "^10.2.1",
     "typescript-plugin-css-modules": "5.2.0",
-    "use-sync-external-store": "1.6.0",
     "vite-plugin-checker": "0.12.0",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-image-optimizer": "2.0.3",

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseDetails.tsx

@@ -37,7 +37,10 @@ import {
 	X,
 } from 'lucide-react';
 import { isCustomTimeRange, useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import {
+	getAutoRefreshQueryKey,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime/utils';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderQuery,
@@ -187,19 +190,16 @@ function K8sBaseDetails<T>({
 	);
 
 	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
-	const lastComputedMinMax = useGlobalTimeStore((s) => s.lastComputedMinMax);
 	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(s) => s.getAutoRefreshQueryKey,
-	);
 
-	const { startMs, endMs } = useMemo(
-		() => ({
-			startMs: Math.floor(lastComputedMinMax.minTime / NANO_SECOND_MULTIPLIER),
-			endMs: Math.floor(lastComputedMinMax.maxTime / NANO_SECOND_MULTIPLIER),
-		}),
-		[lastComputedMinMax],
-	);
+	const { startMs, endMs } = useMemo(() => {
+		const { minTime: startNs, maxTime: endNs } = getMinMaxTime(selectedTime);
+
+		return {
+			startMs: Math.floor(startNs / NANO_SECOND_MULTIPLIER),
+			endMs: Math.floor(endNs / NANO_SECOND_MULTIPLIER),
+		};
+	}, [getMinMaxTime, selectedTime]);
 
 	const [modalTimeRange, setModalTimeRange] = useState(() => ({
 		startTime: startMs,
@@ -246,7 +246,7 @@ function K8sBaseDetails<T>({
 				`${queryKeyPrefix}EntityDetails`,
 				selectedItem,
 			),
-		[getAutoRefreshQueryKey, queryKeyPrefix, selectedItem, selectedTime],
+		[queryKeyPrefix, selectedItem, selectedTime],
 	);
 
 	const {

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseList.tsx

@@ -16,7 +16,10 @@ import { InfraMonitoringEvents } from 'constants/events';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { parseAsString, useQueryState } from 'nuqs';
 import { useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import {
+	getAutoRefreshQueryKey,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime/utils';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
@@ -111,9 +114,6 @@ export function K8sBaseList<T>({
 	const refreshInterval = useGlobalTimeStore((s) => s.refreshInterval);
 	const isRefreshEnabled = useGlobalTimeStore((s) => s.isRefreshEnabled);
 	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(s) => s.getAutoRefreshQueryKey,
-	);
 
 	const queryKey = useMemo(() => {
 		return getAutoRefreshQueryKey(
@@ -127,7 +127,6 @@ export function K8sBaseList<T>({
 			JSON.stringify(groupBy),
 		);
 	}, [
-		getAutoRefreshQueryKey,
 		selectedTime,
 		entity,
 		pageSize,

frontend/src/container/InfraMonitoringK8s/Base/K8sExpandedRow.tsx

@@ -11,7 +11,10 @@ import {
 } from 'antd';
 import { CornerDownRight } from 'lucide-react';
 import { useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import {
+	getAutoRefreshQueryKey,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime/utils';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
@@ -115,9 +118,6 @@ export function K8sExpandedRow<T>({
 	const refreshInterval = useGlobalTimeStore((s) => s.refreshInterval);
 	const isRefreshEnabled = useGlobalTimeStore((s) => s.isRefreshEnabled);
 	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(s) => s.getAutoRefreshQueryKey,
-	);
 
 	const queryKey = useMemo(() => {
 		return getAutoRefreshQueryKey(selectedTime, [
@@ -126,7 +126,7 @@ export function K8sExpandedRow<T>({
 			JSON.stringify(queryFilters),
 			JSON.stringify(orderBy),
 		]);
-	}, [getAutoRefreshQueryKey, selectedTime, record.key, queryFilters, orderBy]);
+	}, [selectedTime, record.key, queryFilters, orderBy]);
 
 	const { data, isFetching, isLoading, isError } = useQuery({
 		queryKey,

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -17,7 +17,7 @@ import dayjs, { Dayjs } from 'dayjs';
 import {
 	useGlobalTimeQueryInvalidate,
 	useIsGlobalTimeQueryRefreshing,
-} from 'store/globalTime';
+} from 'hooks/globalTime';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -101,14 +101,14 @@ function DateTimeSelection({
 	if (modalInitialStartTime !== undefined) {
 		initialModalStartTime = modalInitialStartTime;
 	} else if (searchStartTime) {
-		initialModalStartTime = Number.parseInt(searchStartTime, 10);
+		initialModalStartTime = parseInt(searchStartTime, 10);
 	}
 
 	let initialModalEndTime = 0;
 	if (modalInitialEndTime !== undefined) {
 		initialModalEndTime = modalInitialEndTime;
 	} else if (searchEndTime) {
-		initialModalEndTime = Number.parseInt(searchEndTime, 10);
+		initialModalEndTime = parseInt(searchEndTime, 10);
 	}
 
 	const [modalStartTime, setModalStartTime] = useState<number>(
@@ -159,11 +159,9 @@ function DateTimeSelection({
 	const getTime = useCallback((): [number, number] | undefined => {
 		if (searchEndTime && searchStartTime) {
 			const startDate = dayjs(
-				new Date(Number.parseInt(getTimeString(searchStartTime), 10)),
-			);
-			const endDate = dayjs(
-				new Date(Number.parseInt(getTimeString(searchEndTime), 10)),
+				new Date(parseInt(getTimeString(searchStartTime), 10)),
 			);
+			const endDate = dayjs(new Date(parseInt(getTimeString(searchEndTime), 10)));
 
 			return [startDate.toDate().getTime() || 0, endDate.toDate().getTime() || 0];
 		}

frontend/src/hooks/globalTime/index.ts

@@ -0,0 +1,2 @@
+export { useGlobalTimeQueryInvalidate } from './useGlobalTimeQueryInvalidate';
+export { useIsGlobalTimeQueryRefreshing } from './useIsGlobalTimeQueryRefreshing';

frontend/src/hooks/globalTime/useGlobalTimeQueryInvalidate.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+
+/**
+ * Use when you want to invalida any query tracked by {@link REACT_QUERY_KEY.AUTO_REFRESH_QUERY}
+ */
+export function useGlobalTimeQueryInvalidate(): () => Promise<void> {
+	const queryClient = useQueryClient();
+
+	return useCallback(async () => {
+		return await queryClient.invalidateQueries({
+			queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY],
+		});
+	}, [queryClient]);
+}

frontend/src/hooks/globalTime/useIsGlobalTimeQueryRefreshing.ts

@@ -0,0 +1,13 @@
+import { useIsFetching } from 'react-query';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+
+/**
+ * Use when you want to know if any query tracked by {@link REACT_QUERY_KEY.AUTO_REFRESH_QUERY} is refreshing
+ */
+export function useIsGlobalTimeQueryRefreshing(): boolean {
+	return (
+		useIsFetching({
+			queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY],
+		}) > 0
+	);
+}

frontend/src/store/globalTime/GlobalTimeContext.tsx

@@ -1,71 +0,0 @@
-import {
-	// oxlint-disable-next-line no-restricted-imports
-	createContext,
-	ReactNode,
-	// oxlint-disable-next-line no-restricted-imports
-	useContext,
-	useState,
-} from 'react';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-
-import get from 'api/browser/localstorage/get';
-
-import {
-	createGlobalTimeStore,
-	defaultGlobalTimeStore,
-	GlobalTimeStoreApi,
-} from './globalTimeStore';
-import { GlobalTimeProviderOptions, GlobalTimeSelectedTime } from './types';
-import { usePersistence } from './usePersistence';
-import { useQueryCacheSync } from './useQueryCacheSync';
-import { useUrlSync } from './useUrlSync';
-import { useComputedMinMaxSync } from 'store/globalTime/useComputedMinMaxSync';
-
-export const GlobalTimeContext = createContext<GlobalTimeStoreApi | null>(null);
-
-export function GlobalTimeProvider({
-	children,
-	name,
-	inheritGlobalTime = false,
-	initialTime,
-	enableUrlParams = false,
-	removeQueryParamsOnUnmount = false,
-	localStoragePersistKey,
-	refreshInterval: initialRefreshInterval,
-}: GlobalTimeProviderOptions & { children: ReactNode }): JSX.Element {
-	const parentStore = useContext(GlobalTimeContext);
-	const globalStore = parentStore ?? defaultGlobalTimeStore;
-
-	const resolveInitialTime = (): GlobalTimeSelectedTime => {
-		if (inheritGlobalTime) {
-			return globalStore.getState().selectedTime;
-		}
-		if (localStoragePersistKey) {
-			const stored = get(localStoragePersistKey);
-			if (stored) {
-				return stored as GlobalTimeSelectedTime;
-			}
-		}
-		return initialTime ?? DEFAULT_TIME_RANGE;
-	};
-
-	// Create isolated store (stable reference)
-	const [store] = useState(() =>
-		createGlobalTimeStore({
-			name,
-			selectedTime: resolveInitialTime(),
-			refreshInterval: initialRefreshInterval ?? 0,
-		}),
-	);
-
-	useComputedMinMaxSync(store);
-	useQueryCacheSync(store);
-	useUrlSync(store, enableUrlParams, removeQueryParamsOnUnmount);
-	usePersistence(store, localStoragePersistKey);
-
-	return (
-		<GlobalTimeContext.Provider value={store}>
-			{children}
-		</GlobalTimeContext.Provider>
-	);
-}

frontend/src/store/globalTime/__tests__/GlobalTimeContext.test.tsx

@@ -1,693 +0,0 @@
-import { act, renderHook, waitFor } from '@testing-library/react';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { ReactNode } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-
-import set from 'api/browser/localstorage/set';
-
-import { GlobalTimeProvider } from '../GlobalTimeContext';
-import { useGlobalTime } from '../hooks';
-import { GlobalTimeProviderOptions } from '../types';
-import { createCustomTimeRange, NANO_SECOND_MULTIPLIER } from '../utils';
-
-jest.mock('api/browser/localstorage/set');
-
-const createTestQueryClient = (): QueryClient =>
-	new QueryClient({
-		defaultOptions: {
-			queries: {
-				retry: false,
-			},
-		},
-	});
-
-const createWrapper = (
-	providerProps: GlobalTimeProviderOptions,
-	nuqsProps?: { searchParams?: string },
-) => {
-	const queryClient = createTestQueryClient();
-
-	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
-		return (
-			<QueryClientProvider client={queryClient}>
-				<NuqsTestingAdapter searchParams={nuqsProps?.searchParams}>
-					<GlobalTimeProvider {...providerProps}>{children}</GlobalTimeProvider>
-				</NuqsTestingAdapter>
-			</QueryClientProvider>
-		);
-	};
-};
-
-describe('GlobalTimeProvider', () => {
-	describe('name prop', () => {
-		it('should pass name to store when provided', () => {
-			const wrapper = createWrapper({ name: 'test-drawer' });
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.name), {
-				wrapper,
-			});
-
-			expect(result.current).toBe('test-drawer');
-		});
-
-		it('should have undefined name when not provided', () => {
-			const wrapper = createWrapper({});
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.name), {
-				wrapper,
-			});
-
-			expect(result.current).toBeUndefined();
-		});
-	});
-
-	describe('store isolation', () => {
-		it('should create isolated store for each provider', () => {
-			const wrapper1 = createWrapper({ initialTime: '1h' });
-			const wrapper2 = createWrapper({ initialTime: '15m' });
-
-			const { result: result1 } = renderHook(
-				() => useGlobalTime((s) => s.selectedTime),
-				{ wrapper: wrapper1 },
-			);
-			const { result: result2 } = renderHook(
-				() => useGlobalTime((s) => s.selectedTime),
-				{ wrapper: wrapper2 },
-			);
-
-			expect(result1.current).toBe('1h');
-			expect(result2.current).toBe('15m');
-		});
-	});
-
-	describe('inheritGlobalTime', () => {
-		it('should inherit time from parent store when inheritGlobalTime is true', () => {
-			const queryClient = createTestQueryClient();
-
-			const NestedWrapper = ({
-				children,
-			}: {
-				children: React.ReactNode;
-			}): JSX.Element => (
-				<QueryClientProvider client={queryClient}>
-					<NuqsTestingAdapter>
-						<GlobalTimeProvider initialTime="6h">
-							<GlobalTimeProvider inheritGlobalTime>{children}</GlobalTimeProvider>
-						</GlobalTimeProvider>
-					</NuqsTestingAdapter>
-				</QueryClientProvider>
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper: NestedWrapper,
-			});
-
-			// Should inherit '6h' from parent provider
-			expect(result.current).toBe('6h');
-		});
-
-		it('should use initialTime when inheritGlobalTime is false', () => {
-			const queryClient = createTestQueryClient();
-
-			const NestedWrapper = ({
-				children,
-			}: {
-				children: React.ReactNode;
-			}): JSX.Element => (
-				<QueryClientProvider client={queryClient}>
-					<NuqsTestingAdapter>
-						<GlobalTimeProvider initialTime="6h">
-							<GlobalTimeProvider inheritGlobalTime={false} initialTime="15m">
-								{children}
-							</GlobalTimeProvider>
-						</GlobalTimeProvider>
-					</NuqsTestingAdapter>
-				</QueryClientProvider>
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper: NestedWrapper,
-			});
-
-			// Should use its own initialTime, not parent's
-			expect(result.current).toBe('15m');
-		});
-
-		it('should prefer URL params over inheritGlobalTime when both are present', async () => {
-			const queryClient = createTestQueryClient();
-
-			const NestedWrapper = ({
-				children,
-			}: {
-				children: React.ReactNode;
-			}): JSX.Element => (
-				<QueryClientProvider client={queryClient}>
-					<NuqsTestingAdapter searchParams="?relativeTime=1h">
-						<GlobalTimeProvider initialTime="6h">
-							<GlobalTimeProvider inheritGlobalTime enableUrlParams>
-								{children}
-							</GlobalTimeProvider>
-						</GlobalTimeProvider>
-					</NuqsTestingAdapter>
-				</QueryClientProvider>
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper: NestedWrapper,
-			});
-
-			// inheritGlobalTime sets initial value to '6h', but URL sync updates it to '1h'
-			await waitFor(() => {
-				expect(result.current).toBe('1h');
-			});
-		});
-
-		it('should use inherited time when URL params are empty', async () => {
-			const queryClient = createTestQueryClient();
-
-			const NestedWrapper = ({
-				children,
-			}: {
-				children: React.ReactNode;
-			}): JSX.Element => (
-				<QueryClientProvider client={queryClient}>
-					<NuqsTestingAdapter searchParams="">
-						<GlobalTimeProvider initialTime="6h">
-							<GlobalTimeProvider inheritGlobalTime enableUrlParams>
-								{children}
-							</GlobalTimeProvider>
-						</GlobalTimeProvider>
-					</NuqsTestingAdapter>
-				</QueryClientProvider>
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper: NestedWrapper,
-			});
-
-			// No URL params, should keep inherited value
-			expect(result.current).toBe('6h');
-		});
-
-		it('should prefer custom time URL params over inheritGlobalTime', async () => {
-			const queryClient = createTestQueryClient();
-			const startTime = 1700000000000;
-			const endTime = 1700003600000;
-
-			const NestedWrapper = ({
-				children,
-			}: {
-				children: React.ReactNode;
-			}): JSX.Element => (
-				<QueryClientProvider client={queryClient}>
-					<NuqsTestingAdapter
-						searchParams={`?startTime=${startTime}&endTime=${endTime}`}
-					>
-						<GlobalTimeProvider initialTime="6h">
-							<GlobalTimeProvider inheritGlobalTime enableUrlParams>
-								{children}
-							</GlobalTimeProvider>
-						</GlobalTimeProvider>
-					</NuqsTestingAdapter>
-				</QueryClientProvider>
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), {
-				wrapper: NestedWrapper,
-			});
-
-			// URL custom time params should override inherited time
-			await waitFor(() => {
-				const { minTime, maxTime } = result.current.getMinMaxTime();
-				expect(minTime).toBe(startTime * NANO_SECOND_MULTIPLIER);
-				expect(maxTime).toBe(endTime * NANO_SECOND_MULTIPLIER);
-			});
-		});
-	});
-
-	describe('URL sync', () => {
-		it('should read relativeTime from URL on mount', async () => {
-			const wrapper = createWrapper(
-				{ enableUrlParams: true },
-				{ searchParams: '?relativeTime=1h' },
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
-			});
-
-			await waitFor(() => {
-				expect(result.current).toBe('1h');
-			});
-		});
-
-		it('should read custom time from URL on mount', async () => {
-			const startTime = 1700000000000;
-			const endTime = 1700003600000;
-			const wrapper = createWrapper(
-				{ enableUrlParams: true },
-				{ searchParams: `?startTime=${startTime}&endTime=${endTime}` },
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			await waitFor(() => {
-				const { minTime, maxTime } = result.current.getMinMaxTime();
-				expect(minTime).toBe(startTime * NANO_SECOND_MULTIPLIER);
-				expect(maxTime).toBe(endTime * NANO_SECOND_MULTIPLIER);
-			});
-		});
-
-		it('should use custom URL keys when provided', async () => {
-			const wrapper = createWrapper(
-				{
-					enableUrlParams: {
-						relativeTimeKey: 'modalTime',
-					},
-				},
-				{ searchParams: '?modalTime=3h' },
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
-			});
-
-			await waitFor(() => {
-				expect(result.current).toBe('3h');
-			});
-		});
-
-		it('should use custom startTimeKey and endTimeKey when provided', async () => {
-			const startTime = 1700000000000;
-			const endTime = 1700003600000;
-			const wrapper = createWrapper(
-				{
-					enableUrlParams: {
-						startTimeKey: 'customStart',
-						endTimeKey: 'customEnd',
-					},
-				},
-				{ searchParams: `?customStart=${startTime}&customEnd=${endTime}` },
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			await waitFor(() => {
-				const { minTime, maxTime } = result.current.getMinMaxTime();
-				expect(minTime).toBe(startTime * NANO_SECOND_MULTIPLIER);
-				expect(maxTime).toBe(endTime * NANO_SECOND_MULTIPLIER);
-			});
-		});
-
-		it('should NOT read from URL when enableUrlParams is false', async () => {
-			const wrapper = createWrapper(
-				{ enableUrlParams: false, initialTime: '15m' },
-				{ searchParams: '?relativeTime=1h' },
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
-			});
-
-			// Should use initialTime, not URL value
-			expect(result.current).toBe('15m');
-		});
-
-		it('should prefer startTime/endTime over relativeTime when both present in URL', async () => {
-			const startTime = 1700000000000;
-			const endTime = 1700003600000;
-			const wrapper = createWrapper(
-				{ enableUrlParams: true },
-				{
-					searchParams: `?relativeTime=15m&startTime=${startTime}&endTime=${endTime}`,
-				},
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			await waitFor(() => {
-				const { minTime, maxTime } = result.current.getMinMaxTime();
-				// Should use startTime/endTime, not relativeTime
-				expect(minTime).toBe(startTime * NANO_SECOND_MULTIPLIER);
-				expect(maxTime).toBe(endTime * NANO_SECOND_MULTIPLIER);
-			});
-		});
-
-		it('should use initialTime when URL has invalid time values', async () => {
-			const wrapper = createWrapper(
-				{ enableUrlParams: true, initialTime: '15m' },
-				{ searchParams: '?startTime=invalid&endTime=also-invalid' },
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
-			});
-
-			// parseAsInteger returns null for invalid values, so should fallback to initialTime
-			expect(result.current).toBe('15m');
-		});
-
-		it('should update store when custom time is set from URL with only startTime and endTime', async () => {
-			const startTime = 1700000000000;
-			const endTime = 1700003600000;
-			const wrapper = createWrapper(
-				{ enableUrlParams: true },
-				{ searchParams: `?startTime=${startTime}&endTime=${endTime}` },
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			await waitFor(() => {
-				// Verify selectedTime is a custom time range string
-				expect(result.current.selectedTime).toContain('||_||');
-			});
-		});
-
-		describe('removeQueryParamsOnUnmount', () => {
-			const createUnmountTestWrapper = (
-				getQueryString: () => string,
-				setQueryString: (qs: string) => void,
-			) => {
-				return function TestWrapper({
-					children,
-				}: {
-					children: React.ReactNode;
-				}): JSX.Element {
-					const queryClient = createTestQueryClient();
-					return (
-						<QueryClientProvider client={queryClient}>
-							<NuqsTestingAdapter
-								searchParams={getQueryString()}
-								onUrlUpdate={(event): void => {
-									setQueryString(event.queryString);
-								}}
-							>
-								{children}
-							</NuqsTestingAdapter>
-						</QueryClientProvider>
-					);
-				};
-			};
-
-			it('should remove URL params when provider unmounts with removeQueryParamsOnUnmount=true', async () => {
-				let currentQueryString = 'relativeTime=1h';
-				const TestWrapper = createUnmountTestWrapper(
-					() => currentQueryString,
-					(qs) => {
-						currentQueryString = qs;
-					},
-				);
-
-				const { unmount } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-					wrapper: ({ children }) => (
-						<TestWrapper>
-							<GlobalTimeProvider enableUrlParams removeQueryParamsOnUnmount>
-								{children}
-							</GlobalTimeProvider>
-						</TestWrapper>
-					),
-				});
-
-				// Verify initial URL params are present
-				expect(currentQueryString).toContain('relativeTime=1h');
-
-				// Unmount the provider
-				unmount();
-
-				// URL params should be removed
-				await waitFor(() => {
-					expect(currentQueryString).not.toContain('relativeTime');
-					expect(currentQueryString).not.toContain('startTime');
-					expect(currentQueryString).not.toContain('endTime');
-				});
-			});
-
-			it('should NOT remove URL params when provider unmounts with removeQueryParamsOnUnmount=false', async () => {
-				let currentQueryString = 'relativeTime=1h';
-				const TestWrapper = createUnmountTestWrapper(
-					() => currentQueryString,
-					(qs) => {
-						currentQueryString = qs;
-					},
-				);
-
-				const { unmount } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-					wrapper: ({ children }) => (
-						<TestWrapper>
-							<GlobalTimeProvider enableUrlParams removeQueryParamsOnUnmount={false}>
-								{children}
-							</GlobalTimeProvider>
-						</TestWrapper>
-					),
-				});
-
-				// Verify initial URL params are present
-				expect(currentQueryString).toContain('relativeTime=1h');
-
-				// Unmount the provider
-				unmount();
-
-				// Wait a tick to ensure cleanup effects would have run
-				await waitFor(() => {
-					// URL params should still be present
-					expect(currentQueryString).toContain('relativeTime=1h');
-				});
-			});
-
-			it('should remove custom time URL params on unmount', async () => {
-				const startTime = 1700000000000;
-				const endTime = 1700003600000;
-				let currentQueryString = `startTime=${startTime}&endTime=${endTime}`;
-				const TestWrapper = createUnmountTestWrapper(
-					() => currentQueryString,
-					(qs) => {
-						currentQueryString = qs;
-					},
-				);
-
-				const { unmount } = renderHook(() => useGlobalTime(), {
-					wrapper: ({ children }) => (
-						<TestWrapper>
-							<GlobalTimeProvider enableUrlParams removeQueryParamsOnUnmount>
-								{children}
-							</GlobalTimeProvider>
-						</TestWrapper>
-					),
-				});
-
-				// Verify initial URL params are present
-				expect(currentQueryString).toContain('startTime');
-				expect(currentQueryString).toContain('endTime');
-
-				// Unmount the provider
-				unmount();
-
-				// URL params should be removed
-				await waitFor(() => {
-					expect(currentQueryString).not.toContain('startTime');
-					expect(currentQueryString).not.toContain('endTime');
-				});
-			});
-
-			it('should remove custom URL key params on unmount', async () => {
-				let currentQueryString = 'modalTime=3h';
-				const TestWrapper = createUnmountTestWrapper(
-					() => currentQueryString,
-					(qs) => {
-						currentQueryString = qs;
-					},
-				);
-
-				const { unmount } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-					wrapper: ({ children }) => (
-						<TestWrapper>
-							<GlobalTimeProvider
-								enableUrlParams={{
-									relativeTimeKey: 'modalTime',
-								}}
-								removeQueryParamsOnUnmount
-							>
-								{children}
-							</GlobalTimeProvider>
-						</TestWrapper>
-					),
-				});
-
-				// Verify initial URL params are present
-				expect(currentQueryString).toContain('modalTime=3h');
-
-				// Unmount the provider
-				unmount();
-
-				// URL params should be removed
-				await waitFor(() => {
-					expect(currentQueryString).not.toContain('modalTime');
-				});
-			});
-
-			it('should NOT remove URL params when enableUrlParams is false', async () => {
-				let currentQueryString = 'relativeTime=1h';
-				const TestWrapper = createUnmountTestWrapper(
-					() => currentQueryString,
-					(qs) => {
-						currentQueryString = qs;
-					},
-				);
-
-				const { unmount } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-					wrapper: ({ children }) => (
-						<TestWrapper>
-							<GlobalTimeProvider enableUrlParams={false} removeQueryParamsOnUnmount>
-								{children}
-							</GlobalTimeProvider>
-						</TestWrapper>
-					),
-				});
-
-				// Verify initial URL params are present
-				expect(currentQueryString).toContain('relativeTime=1h');
-
-				// Unmount the provider
-				unmount();
-
-				// Wait a tick
-				await waitFor(() => {
-					// URL params should still be present (enableUrlParams is false)
-					expect(currentQueryString).toContain('relativeTime=1h');
-				});
-			});
-		});
-	});
-
-	describe('localStorage persistence', () => {
-		const mockSet = set as jest.MockedFunction<typeof set>;
-
-		beforeEach(() => {
-			localStorage.clear();
-			mockSet.mockClear();
-			mockSet.mockReturnValue(true);
-		});
-
-		it('should read from localStorage on mount', () => {
-			localStorage.setItem('test-time-key', '6h');
-
-			const wrapper = createWrapper({ localStoragePersistKey: 'test-time-key' });
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
-			});
-
-			expect(result.current).toBe('6h');
-		});
-
-		it('should write to localStorage on selectedTime change', async () => {
-			const wrapper = createWrapper({
-				localStoragePersistKey: 'test-persist-key',
-			});
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			mockSet.mockClear();
-
-			act(() => {
-				result.current.setSelectedTime('12h');
-			});
-
-			await waitFor(() => {
-				expect(mockSet).toHaveBeenCalledWith('test-persist-key', '12h');
-			});
-		});
-
-		it('should NOT write to localStorage when persistKey is undefined', async () => {
-			const wrapper = createWrapper({ initialTime: '15m' });
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			mockSet.mockClear();
-
-			act(() => {
-				result.current.setSelectedTime('1h');
-			});
-
-			// Wait a tick to ensure any async operations complete
-			await waitFor(() => {
-				expect(result.current.selectedTime).toBe('1h');
-			});
-
-			expect(mockSet).not.toHaveBeenCalled();
-		});
-
-		it('should only write to localStorage when selectedTime changes, not other state', async () => {
-			const wrapper = createWrapper({
-				localStoragePersistKey: 'test-key',
-				initialTime: '15m',
-			});
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			mockSet.mockClear();
-
-			// Change refreshInterval (not selectedTime)
-			act(() => {
-				result.current.setRefreshInterval(5000);
-			});
-
-			// Wait to ensure subscription handler had a chance to run
-			await waitFor(() => {
-				expect(result.current.refreshInterval).toBe(5000);
-			});
-
-			// Should NOT have written to localStorage for refreshInterval change
-			expect(mockSet).not.toHaveBeenCalled();
-
-			// Now change selectedTime
-			act(() => {
-				result.current.setSelectedTime('1h');
-			});
-
-			await waitFor(() => {
-				expect(mockSet).toHaveBeenCalledWith('test-key', '1h');
-			});
-		});
-
-		it('should fallback to initialTime when localStorage contains empty string', () => {
-			localStorage.setItem('test-key', '');
-
-			const wrapper = createWrapper({
-				localStoragePersistKey: 'test-key',
-				initialTime: '15m',
-			});
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
-			});
-
-			// Empty string is falsy, should use initialTime
-			expect(result.current).toBe('15m');
-		});
-
-		it('should write custom time range to localStorage', async () => {
-			const wrapper = createWrapper({
-				localStoragePersistKey: 'test-custom-key',
-				initialTime: '15m',
-			});
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			mockSet.mockClear();
-
-			const customTime = createCustomTimeRange(1000000000, 2000000000);
-			act(() => {
-				result.current.setSelectedTime(customTime);
-			});
-
-			await waitFor(() => {
-				expect(mockSet).toHaveBeenCalledWith('test-custom-key', customTime);
-			});
-		});
-	});
-
-	describe('refreshInterval', () => {
-		it('should initialize with provided refreshInterval', () => {
-			const wrapper = createWrapper({ refreshInterval: 5000 });
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			expect(result.current.refreshInterval).toBe(5000);
-			expect(result.current.isRefreshEnabled).toBe(true);
-		});
-	});
-});

frontend/src/store/globalTime/__tests__/createGlobalTimeStore.test.ts

@@ -1,148 +0,0 @@
-import { act } from '@testing-library/react';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-
-import {
-	createGlobalTimeStore,
-	defaultGlobalTimeStore,
-} from '../globalTimeStore';
-import { createCustomTimeRange } from '../utils';
-
-describe('createGlobalTimeStore', () => {
-	describe('factory function', () => {
-		it('should create independent store instances', () => {
-			const store1 = createGlobalTimeStore();
-			const store2 = createGlobalTimeStore();
-
-			store1.getState().setSelectedTime('1h');
-
-			expect(store1.getState().selectedTime).toBe('1h');
-			expect(store2.getState().selectedTime).toBe(DEFAULT_TIME_RANGE);
-		});
-
-		it('should accept initial state', () => {
-			const store = createGlobalTimeStore({
-				selectedTime: '15m',
-				refreshInterval: 5000,
-			});
-
-			expect(store.getState().selectedTime).toBe('15m');
-			expect(store.getState().refreshInterval).toBe(5000);
-			expect(store.getState().isRefreshEnabled).toBe(true);
-		});
-
-		it('should compute isRefreshEnabled correctly for custom time', () => {
-			const customTime = createCustomTimeRange(1000000000, 2000000000);
-			const store = createGlobalTimeStore({
-				selectedTime: customTime,
-				refreshInterval: 5000,
-			});
-
-			expect(store.getState().isRefreshEnabled).toBe(false);
-		});
-	});
-
-	describe('defaultGlobalTimeStore', () => {
-		it('should be a singleton', () => {
-			expect(defaultGlobalTimeStore).toBeDefined();
-			expect(defaultGlobalTimeStore.getState().selectedTime).toBeDefined();
-		});
-	});
-
-	describe('setRefreshInterval', () => {
-		it('should update refresh interval and enable refresh', () => {
-			const store = createGlobalTimeStore();
-
-			act(() => {
-				store.getState().setRefreshInterval(10000);
-			});
-
-			expect(store.getState().refreshInterval).toBe(10000);
-			expect(store.getState().isRefreshEnabled).toBe(true);
-		});
-
-		it('should disable refresh when interval is 0', () => {
-			const store = createGlobalTimeStore({ refreshInterval: 5000 });
-
-			act(() => {
-				store.getState().setRefreshInterval(0);
-			});
-
-			expect(store.getState().refreshInterval).toBe(0);
-			expect(store.getState().isRefreshEnabled).toBe(false);
-		});
-
-		it('should not enable refresh for custom time range', () => {
-			const customTime = createCustomTimeRange(1000000000, 2000000000);
-			const store = createGlobalTimeStore({ selectedTime: customTime });
-
-			act(() => {
-				store.getState().setRefreshInterval(10000);
-			});
-
-			expect(store.getState().refreshInterval).toBe(10000);
-			expect(store.getState().isRefreshEnabled).toBe(false);
-		});
-	});
-
-	describe('store name', () => {
-		it('should store name when provided', () => {
-			const store = createGlobalTimeStore({ name: 'drawer' });
-			expect(store.getState().name).toBe('drawer');
-		});
-
-		it('should have undefined name when not provided', () => {
-			const store = createGlobalTimeStore();
-			expect(store.getState().name).toBeUndefined();
-		});
-	});
-
-	describe('getAutoRefreshQueryKey', () => {
-		it('should generate key without name for unnamed store', () => {
-			const store = createGlobalTimeStore();
-			const key = store
-				.getState()
-				.getAutoRefreshQueryKey('15m', 'MY_QUERY', 'param1');
-
-			expect(key).toStrictEqual([
-				REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-				'MY_QUERY',
-				'param1',
-				'15m',
-			]);
-		});
-
-		it('should generate key with name for named store', () => {
-			const store = createGlobalTimeStore({ name: 'drawer' });
-			const key = store
-				.getState()
-				.getAutoRefreshQueryKey('15m', 'MY_QUERY', 'param1');
-
-			expect(key).toStrictEqual([
-				REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-				'drawer',
-				'MY_QUERY',
-				'param1',
-				'15m',
-			]);
-		});
-
-		it('should handle no query parts for named store', () => {
-			const store = createGlobalTimeStore({ name: 'test' });
-			const key = store.getState().getAutoRefreshQueryKey('1h');
-
-			expect(key).toStrictEqual([
-				REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-				'test',
-				'1h',
-			]);
-		});
-
-		it('should handle no query parts for unnamed store', () => {
-			const store = createGlobalTimeStore();
-			const key = store.getState().getAutoRefreshQueryKey('1h');
-
-			expect(key).toStrictEqual([REACT_QUERY_KEY.AUTO_REFRESH_QUERY, '1h']);
-		});
-	});
-});

frontend/src/store/globalTime/__tests__/globalTimeStore.test.ts

@@ -0,0 +1,202 @@
+import { act, renderHook } from '@testing-library/react';
+import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
+
+import { useGlobalTimeStore } from '../globalTimeStore';
+import { GlobalTimeSelectedTime } from '../types';
+import { createCustomTimeRange, NANO_SECOND_MULTIPLIER } from '../utils';
+
+describe('globalTimeStore', () => {
+	beforeEach(() => {
+		const { result } = renderHook(() => useGlobalTimeStore());
+		act(() => {
+			result.current.setSelectedTime(DEFAULT_TIME_RANGE, 0);
+		});
+	});
+
+	describe('initial state', () => {
+		it(`should have default selectedTime of ${DEFAULT_TIME_RANGE}`, () => {
+			const { result } = renderHook(() => useGlobalTimeStore());
+			expect(result.current.selectedTime).toBe(DEFAULT_TIME_RANGE);
+		});
+
+		it('should have isRefreshEnabled as false by default', () => {
+			const { result } = renderHook(() => useGlobalTimeStore());
+			expect(result.current.isRefreshEnabled).toBe(false);
+		});
+
+		it('should have refreshInterval as 0 by default', () => {
+			const { result } = renderHook(() => useGlobalTimeStore());
+			expect(result.current.refreshInterval).toBe(0);
+		});
+	});
+
+	describe('setSelectedTime', () => {
+		it('should update selectedTime', () => {
+			const { result } = renderHook(() => useGlobalTimeStore());
+
+			act(() => {
+				result.current.setSelectedTime('15m');
+			});
+
+			expect(result.current.selectedTime).toBe('15m');
+		});
+
+		it('should update refreshInterval when provided', () => {
+			const { result } = renderHook(() => useGlobalTimeStore());
+
+			act(() => {
+				result.current.setSelectedTime('15m', 5000);
+			});
+
+			expect(result.current.refreshInterval).toBe(5000);
+		});
+
+		it('should keep existing refreshInterval when not provided', () => {
+			const { result } = renderHook(() => useGlobalTimeStore());
+
+			act(() => {
+				result.current.setSelectedTime('15m', 5000);
+			});
+
+			act(() => {
+				result.current.setSelectedTime('1h');
+			});
+
+			expect(result.current.refreshInterval).toBe(5000);
+		});
+
+		it('should enable refresh for relative time with refreshInterval > 0', () => {
+			const { result } = renderHook(() => useGlobalTimeStore());
+
+			act(() => {
+				result.current.setSelectedTime('15m', 5000);
+			});
+
+			expect(result.current.isRefreshEnabled).toBe(true);
+		});
+
+		it('should disable refresh for relative time with refreshInterval = 0', () => {
+			const { result } = renderHook(() => useGlobalTimeStore());
+
+			act(() => {
+				result.current.setSelectedTime('15m', 0);
+			});
+
+			expect(result.current.isRefreshEnabled).toBe(false);
+		});
+
+		it('should disable refresh for custom time range even with refreshInterval > 0', () => {
+			const { result } = renderHook(() => useGlobalTimeStore());
+			const customTime = createCustomTimeRange(1000000000, 2000000000);
+
+			act(() => {
+				result.current.setSelectedTime(customTime, 5000);
+			});
+
+			expect(result.current.isRefreshEnabled).toBe(false);
+			expect(result.current.refreshInterval).toBe(5000);
+		});
+
+		it('should handle various relative time formats', () => {
+			const { result } = renderHook(() => useGlobalTimeStore());
+			const timeFormats: GlobalTimeSelectedTime[] = [
+				'1m',
+				'5m',
+				'15m',
+				'30m',
+				'1h',
+				'3h',
+				'6h',
+				'1d',
+				'1w',
+			];
+
+			timeFormats.forEach((time) => {
+				act(() => {
+					result.current.setSelectedTime(time, 10000);
+				});
+
+				expect(result.current.selectedTime).toBe(time);
+				expect(result.current.isRefreshEnabled).toBe(true);
+			});
+		});
+	});
+
+	describe('getMinMaxTime', () => {
+		beforeEach(() => {
+			jest.useFakeTimers();
+			jest.setSystemTime(new Date('2024-01-15T12:00:00.000Z'));
+		});
+
+		afterEach(() => {
+			jest.useRealTimers();
+		});
+
+		it('should return min/max time for custom time range', () => {
+			const { result } = renderHook(() => useGlobalTimeStore());
+			const minTime = 1000000000;
+			const maxTime = 2000000000;
+			const customTime = createCustomTimeRange(minTime, maxTime);
+
+			act(() => {
+				result.current.setSelectedTime(customTime);
+			});
+
+			const { minTime: resultMin, maxTime: resultMax } =
+				result.current.getMinMaxTime();
+			expect(resultMin).toBe(minTime);
+			expect(resultMax).toBe(maxTime);
+		});
+
+		it('should compute fresh min/max time for relative time', () => {
+			const { result } = renderHook(() => useGlobalTimeStore());
+
+			act(() => {
+				result.current.setSelectedTime('15m');
+			});
+
+			const { minTime, maxTime } = result.current.getMinMaxTime();
+			const now = Date.now() * NANO_SECOND_MULTIPLIER;
+			const fifteenMinutesNs = 15 * 60 * 1000 * NANO_SECOND_MULTIPLIER;
+
+			expect(maxTime).toBe(now);
+			expect(minTime).toBe(now - fifteenMinutesNs);
+		});
+
+		it('should return different values on subsequent calls for relative time', () => {
+			const { result } = renderHook(() => useGlobalTimeStore());
+
+			act(() => {
+				result.current.setSelectedTime('15m');
+			});
+
+			const first = result.current.getMinMaxTime();
+
+			// Advance time by 1 second
+			act(() => {
+				jest.advanceTimersByTime(1000);
+			});
+
+			const second = result.current.getMinMaxTime();
+
+			// maxTime should be different (1 second later)
+			expect(second.maxTime).toBe(first.maxTime + 1000 * NANO_SECOND_MULTIPLIER);
+			expect(second.minTime).toBe(first.minTime + 1000 * NANO_SECOND_MULTIPLIER);
+		});
+	});
+
+	describe('store isolation', () => {
+		it('should share state between multiple hook instances', () => {
+			const { result: result1 } = renderHook(() => useGlobalTimeStore());
+			const { result: result2 } = renderHook(() => useGlobalTimeStore());
+
+			act(() => {
+				result1.current.setSelectedTime('1h', 10000);
+			});
+
+			expect(result2.current.selectedTime).toBe('1h');
+			expect(result2.current.refreshInterval).toBe(10000);
+			expect(result2.current.isRefreshEnabled).toBe(true);
+		});
+	});
+});

frontend/src/store/globalTime/__tests__/globalTimeStore.test.tsx

@@ -1,868 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { ReactNode } from 'react';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-
-import { createGlobalTimeStore, useGlobalTimeStore } from '../globalTimeStore';
-import { GlobalTimeContext } from '../GlobalTimeContext';
-import { useGlobalTime } from '../hooks';
-import { GlobalTimeSelectedTime, GlobalTimeState } from '../types';
-import { createCustomTimeRange, NANO_SECOND_MULTIPLIER } from '../utils';
-
-/**
- * Creates an isolated store wrapper for testing.
- * Each test gets its own store instance, avoiding test pollution.
- */
-function createIsolatedWrapper(
-	initialState?: Partial<GlobalTimeState>,
-): ({ children }: { children: ReactNode }) => JSX.Element {
-	const store = createGlobalTimeStore(initialState);
-	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
-		return (
-			<GlobalTimeContext.Provider value={store}>
-				{children}
-			</GlobalTimeContext.Provider>
-		);
-	};
-}
-
-describe('globalTimeStore', () => {
-	beforeEach(() => {
-		const { result } = renderHook(() => useGlobalTimeStore());
-		act(() => {
-			result.current.setSelectedTime(DEFAULT_TIME_RANGE, 0);
-		});
-	});
-
-	describe('initial state', () => {
-		it(`should have default selectedTime of ${DEFAULT_TIME_RANGE}`, () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-			expect(result.current.selectedTime).toBe(DEFAULT_TIME_RANGE);
-		});
-
-		it('should have isRefreshEnabled as false by default', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-			expect(result.current.isRefreshEnabled).toBe(false);
-		});
-
-		it('should have refreshInterval as 0 by default', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-			expect(result.current.refreshInterval).toBe(0);
-		});
-
-		it('should have lastRefreshTimestamp as 0 by default', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-			expect(result.current.lastRefreshTimestamp).toBe(0);
-		});
-
-		it('should have lastComputedMinMax with default values', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-			expect(result.current.lastComputedMinMax).toStrictEqual({
-				minTime: 0,
-				maxTime: 0,
-			});
-		});
-	});
-
-	describe('setSelectedTime', () => {
-		it('should update selectedTime', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-
-			act(() => {
-				result.current.setSelectedTime('15m');
-			});
-
-			expect(result.current.selectedTime).toBe('15m');
-		});
-
-		it('should update refreshInterval when provided', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-
-			act(() => {
-				result.current.setSelectedTime('15m', 5000);
-			});
-
-			expect(result.current.refreshInterval).toBe(5000);
-		});
-
-		it('should keep existing refreshInterval when not provided', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-
-			act(() => {
-				result.current.setSelectedTime('15m', 5000);
-			});
-
-			act(() => {
-				result.current.setSelectedTime('1h');
-			});
-
-			expect(result.current.refreshInterval).toBe(5000);
-		});
-
-		it('should enable refresh for relative time with refreshInterval > 0', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-
-			act(() => {
-				result.current.setSelectedTime('15m', 5000);
-			});
-
-			expect(result.current.isRefreshEnabled).toBe(true);
-		});
-
-		it('should disable refresh for relative time with refreshInterval = 0', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-
-			act(() => {
-				result.current.setSelectedTime('15m', 0);
-			});
-
-			expect(result.current.isRefreshEnabled).toBe(false);
-		});
-
-		it('should disable refresh for custom time range even with refreshInterval > 0', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-			const customTime = createCustomTimeRange(1000000000, 2000000000);
-
-			act(() => {
-				result.current.setSelectedTime(customTime, 5000);
-			});
-
-			expect(result.current.isRefreshEnabled).toBe(false);
-			expect(result.current.refreshInterval).toBe(5000);
-		});
-
-		it('should handle various relative time formats', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-			const timeFormats: GlobalTimeSelectedTime[] = [
-				'1m',
-				'5m',
-				'15m',
-				'30m',
-				'1h',
-				'3h',
-				'6h',
-				'1d',
-				'1w',
-			];
-
-			timeFormats.forEach((time) => {
-				act(() => {
-					result.current.setSelectedTime(time, 10000);
-				});
-
-				expect(result.current.selectedTime).toBe(time);
-				expect(result.current.isRefreshEnabled).toBe(true);
-			});
-		});
-
-		it('should compute and store lastComputedMinMax when selectedTime changes', () => {
-			const wrapper = createIsolatedWrapper({
-				selectedTime: '15m',
-				refreshInterval: 5000,
-			});
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			// setSelectedTime computes values on init (createIsolatedWrapper uses createGlobalTimeStore)
-			// But initial store state has minTime/maxTime as 0 until first setSelectedTime is called
-			const initialMinMax = { ...result.current.lastComputedMinMax };
-
-			// Now switch to a custom time range
-			const customTime = createCustomTimeRange(1000000000, 2000000000);
-			act(() => {
-				result.current.setSelectedTime(customTime);
-			});
-
-			// lastComputedMinMax should be updated to the custom range values
-			expect(result.current.lastComputedMinMax).toStrictEqual({
-				minTime: 1000000000,
-				maxTime: 2000000000,
-			});
-			expect(result.current.lastComputedMinMax).not.toStrictEqual(initialMinMax);
-		});
-
-		it('should return fresh custom time values after switching from relative time', () => {
-			jest.useFakeTimers();
-			jest.setSystemTime(new Date('2024-01-15T12:00:00.000Z'));
-
-			const wrapper = createIsolatedWrapper({
-				selectedTime: '15m',
-				refreshInterval: 5000,
-			});
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			// Compute and cache values for relative time
-			act(() => {
-				result.current.computeAndStoreMinMax();
-			});
-
-			const relativeMinMax = { ...result.current.lastComputedMinMax };
-
-			// Switch to custom time range
-			const customMinTime = 5000000000;
-			const customMaxTime = 6000000000;
-			const customTime = createCustomTimeRange(customMinTime, customMaxTime);
-
-			act(() => {
-				result.current.setSelectedTime(customTime);
-			});
-
-			// getMinMaxTime should return the custom time values, not cached relative values
-			const returned = result.current.getMinMaxTime();
-
-			expect(returned.minTime).toBe(customMinTime);
-			expect(returned.maxTime).toBe(customMaxTime);
-			expect(returned).not.toStrictEqual(relativeMinMax);
-
-			jest.useRealTimers();
-		});
-	});
-
-	describe('getMinMaxTime', () => {
-		beforeEach(() => {
-			jest.useFakeTimers();
-			jest.setSystemTime(new Date('2024-01-15T12:00:00.000Z'));
-		});
-
-		afterEach(() => {
-			jest.useRealTimers();
-		});
-
-		it('should return min/max time for custom time range', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-			const minTime = 1000000000;
-			const maxTime = 2000000000;
-			const customTime = createCustomTimeRange(minTime, maxTime);
-
-			act(() => {
-				result.current.setSelectedTime(customTime);
-			});
-
-			const { minTime: resultMin, maxTime: resultMax } =
-				result.current.getMinMaxTime();
-			expect(resultMin).toBe(minTime);
-			expect(resultMax).toBe(maxTime);
-		});
-
-		it('should NOT round custom time range values to minute boundaries', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-			// Use timestamps that are NOT on minute boundaries (12:30:45.123)
-			// If rounding occurred, these would change to 12:30:00.000
-			const minTimeWithSeconds =
-				new Date('2024-01-15T12:15:45.123Z').getTime() * NANO_SECOND_MULTIPLIER;
-			const maxTimeWithSeconds =
-				new Date('2024-01-15T12:30:45.123Z').getTime() * NANO_SECOND_MULTIPLIER;
-
-			// What the values would be if rounded down to minute boundary
-			const minTimeRounded =
-				new Date('2024-01-15T12:15:00.000Z').getTime() * NANO_SECOND_MULTIPLIER;
-			const maxTimeRounded =
-				new Date('2024-01-15T12:30:00.000Z').getTime() * NANO_SECOND_MULTIPLIER;
-
-			const customTime = createCustomTimeRange(
-				minTimeWithSeconds,
-				maxTimeWithSeconds,
-			);
-
-			act(() => {
-				result.current.setSelectedTime(customTime);
-			});
-
-			const { minTime, maxTime } = result.current.getMinMaxTime();
-
-			// Should return exact values, NOT rounded values
-			expect(minTime).toBe(minTimeWithSeconds);
-			expect(maxTime).toBe(maxTimeWithSeconds);
-			expect(minTime).not.toBe(minTimeRounded);
-			expect(maxTime).not.toBe(maxTimeRounded);
-		});
-
-		it('should compute fresh min/max time for relative time', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-
-			act(() => {
-				result.current.setSelectedTime('15m');
-			});
-
-			const { minTime, maxTime } = result.current.getMinMaxTime();
-			const now = Date.now() * NANO_SECOND_MULTIPLIER;
-			const fifteenMinutesNs = 15 * 60 * 1000 * NANO_SECOND_MULTIPLIER;
-
-			expect(maxTime).toBe(now);
-			expect(minTime).toBe(now - fifteenMinutesNs);
-		});
-
-		it('should return same values on subsequent calls when refresh disabled (under minute boundary)', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-
-			act(() => {
-				result.current.setSelectedTime('15m', 0); // refresh disabled
-			});
-
-			const first = result.current.getMinMaxTime();
-
-			act(() => {
-				jest.advanceTimersByTime(59000);
-			});
-
-			const second = result.current.getMinMaxTime();
-
-			// With refresh disabled, should return cached lastComputedMinMax
-			expect(second.maxTime).toBe(first.maxTime);
-			expect(second.minTime).toBe(first.minTime);
-		});
-
-		it('should return different values on subsequent calls when refresh disabled after minute boundary', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-
-			act(() => {
-				result.current.setSelectedTime('15m', 0); // refresh disabled
-			});
-
-			const first = result.current.getMinMaxTime();
-
-			act(() => {
-				jest.advanceTimersByTime(60000);
-			});
-
-			// Without refresh enabled, getMinMaxTime returns cached values
-			// Need to call computeAndStoreMinMax to get new values
-			const second = result.current.getMinMaxTime();
-			expect(second.maxTime).toBe(first.maxTime);
-
-			// After computing, values should update
-			act(() => {
-				result.current.computeAndStoreMinMax();
-			});
-
-			const third = result.current.getMinMaxTime();
-			expect(third.maxTime).toBe(first.maxTime + 60000 * NANO_SECOND_MULTIPLIER);
-			expect(third.minTime).toBe(first.minTime + 60000 * NANO_SECOND_MULTIPLIER);
-		});
-
-		it('should return stored lastComputedMinMax when available', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-
-			act(() => {
-				result.current.setSelectedTime('15m');
-				result.current.computeAndStoreMinMax();
-			});
-
-			const stored = { ...result.current.lastComputedMinMax };
-
-			// Advance time by 5 seconds
-			act(() => {
-				jest.advanceTimersByTime(5000);
-			});
-
-			// getMinMaxTime should return stored values, not fresh computation
-			const returned = result.current.getMinMaxTime();
-			expect(returned).toStrictEqual(stored);
-		});
-
-		describe('with isRefreshEnabled (isolated store)', () => {
-			it('should compute fresh values when isRefreshEnabled is true (5s rounding)', () => {
-				jest.setSystemTime(new Date('2024-01-15T12:00:00.000Z')); // Start at 5s boundary
-
-				const wrapper = createIsolatedWrapper({
-					selectedTime: '15m',
-					refreshInterval: 5000,
-				});
-				const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-				// getMinMaxTime computes 5s-rounded values when refresh enabled
-				const initialMinMax = result.current.getMinMaxTime();
-
-				// Advance time by 5 seconds to cross 5s boundary
-				act(() => {
-					jest.advanceTimersByTime(5000);
-				});
-
-				// getMinMaxTime should return fresh values, not cached
-				const freshValues = result.current.getMinMaxTime();
-
-				expect(freshValues.maxTime).toBe(
-					initialMinMax.maxTime + 5000 * NANO_SECOND_MULTIPLIER,
-				);
-				expect(freshValues.minTime).toBe(
-					initialMinMax.minTime + 5000 * NANO_SECOND_MULTIPLIER,
-				);
-			});
-
-			it('should update lastComputedMinMax when values change (5s rounding)', () => {
-				jest.setSystemTime(new Date('2024-01-15T12:00:00.000Z')); // Start at 5s boundary
-
-				const wrapper = createIsolatedWrapper({
-					selectedTime: '15m',
-					refreshInterval: 5000,
-				});
-				const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-				// Get initial values (uses 5s rounding when refresh enabled)
-				const initialMinMax = result.current.getMinMaxTime();
-
-				// Advance time by 5 seconds to cross 5s boundary
-				act(() => {
-					jest.advanceTimersByTime(5000);
-				});
-
-				// Call getMinMaxTime - should update lastComputedMinMax
-				act(() => {
-					result.current.getMinMaxTime();
-				});
-
-				expect(result.current.lastComputedMinMax.maxTime).toBe(
-					initialMinMax.maxTime + 5000 * NANO_SECOND_MULTIPLIER,
-				);
-				expect(result.current.lastComputedMinMax.minTime).toBe(
-					initialMinMax.minTime + 5000 * NANO_SECOND_MULTIPLIER,
-				);
-			});
-
-			it('should update lastRefreshTimestamp when values change', () => {
-				const wrapper = createIsolatedWrapper({
-					selectedTime: '15m',
-					refreshInterval: 5000,
-				});
-				const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-				act(() => {
-					result.current.computeAndStoreMinMax();
-				});
-
-				const initialTimestamp = result.current.lastRefreshTimestamp;
-
-				// Advance time past minute boundary
-				act(() => {
-					jest.advanceTimersByTime(60000);
-				});
-
-				// Call getMinMaxTime - should update timestamp
-				act(() => {
-					result.current.getMinMaxTime();
-				});
-
-				expect(result.current.lastRefreshTimestamp).toBeGreaterThan(
-					initialTimestamp,
-				);
-			});
-
-			it('should NOT update lastComputedMinMax when values have not changed (same 5s window)', () => {
-				jest.setSystemTime(new Date('2024-01-15T12:00:00.000Z')); // Start at 5s boundary
-
-				const wrapper = createIsolatedWrapper({
-					selectedTime: '15m',
-					refreshInterval: 5000,
-				});
-				const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-				// Get initial values (triggers computation for 5s-rounded values)
-				result.current.getMinMaxTime();
-
-				const initialMinMax = { ...result.current.lastComputedMinMax };
-				const initialTimestamp = result.current.lastRefreshTimestamp;
-
-				// Advance time but stay within same 5-second window
-				act(() => {
-					jest.advanceTimersByTime(4000);
-				});
-
-				// Call getMinMaxTime - should NOT update store (same 5s boundary)
-				act(() => {
-					result.current.getMinMaxTime();
-				});
-
-				// Values should be unchanged (no unnecessary re-renders)
-				expect(result.current.lastComputedMinMax).toStrictEqual(initialMinMax);
-				expect(result.current.lastRefreshTimestamp).toBe(initialTimestamp);
-			});
-
-			it('should return cached values when isRefreshEnabled is false', () => {
-				const wrapper = createIsolatedWrapper({
-					selectedTime: '15m',
-					refreshInterval: 0, // Refresh disabled
-				});
-				const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-				act(() => {
-					result.current.computeAndStoreMinMax();
-				});
-
-				const storedMinMax = { ...result.current.lastComputedMinMax };
-
-				// Advance time past minute boundary
-				act(() => {
-					jest.advanceTimersByTime(60000);
-				});
-
-				// getMinMaxTime should return cached values since refresh is disabled
-				const returned = result.current.getMinMaxTime();
-
-				expect(returned).toStrictEqual(storedMinMax);
-				expect(result.current.lastComputedMinMax).toStrictEqual(storedMinMax);
-			});
-
-			it('should return same values for custom time range regardless of time passing', () => {
-				const minTime = 1000000000;
-				const maxTime = 2000000000;
-				const customTime = createCustomTimeRange(minTime, maxTime);
-
-				const wrapper = createIsolatedWrapper({
-					selectedTime: customTime,
-					refreshInterval: 5000,
-				});
-				const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-				// isRefreshEnabled should be false for custom time ranges
-				expect(result.current.isRefreshEnabled).toBe(false);
-
-				// Custom time ranges always return the fixed values, not relative to "now"
-				const first = result.current.getMinMaxTime();
-				expect(first.minTime).toBe(minTime);
-				expect(first.maxTime).toBe(maxTime);
-
-				// Advance time past minute boundary
-				act(() => {
-					jest.advanceTimersByTime(60000);
-				});
-
-				// Should still return the same fixed values (custom range doesn't drift)
-				const second = result.current.getMinMaxTime();
-				expect(second.minTime).toBe(minTime);
-				expect(second.maxTime).toBe(maxTime);
-			});
-
-			it('should handle multiple consecutive refetch intervals correctly (5s rounding)', () => {
-				jest.setSystemTime(new Date('2024-01-15T12:00:00.000Z')); // Start at 5s boundary
-
-				const wrapper = createIsolatedWrapper({
-					selectedTime: '15m',
-					refreshInterval: 5000,
-				});
-				const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-				// Get initial values
-				const initialMinMax = result.current.getMinMaxTime();
-
-				// Simulate 3 refetch intervals crossing 5-second boundaries
-				for (let i = 1; i <= 3; i++) {
-					act(() => {
-						jest.advanceTimersByTime(5000);
-					});
-
-					act(() => {
-						result.current.getMinMaxTime();
-					});
-
-					expect(result.current.lastComputedMinMax.maxTime).toBe(
-						initialMinMax.maxTime + i * 5000 * NANO_SECOND_MULTIPLIER,
-					);
-				}
-			});
-		});
-	});
-
-	describe('computeAndStoreMinMax', () => {
-		beforeEach(() => {
-			jest.useFakeTimers();
-			jest.setSystemTime(new Date('2024-01-15T12:30:45.123Z'));
-		});
-
-		afterEach(() => {
-			jest.useRealTimers();
-		});
-
-		it('should compute and store min/max values', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-
-			act(() => {
-				result.current.setSelectedTime('15m');
-			});
-
-			act(() => {
-				result.current.computeAndStoreMinMax();
-			});
-
-			// maxTime should be the current time (no rounding when refresh disabled)
-			const expectedMaxTime =
-				new Date('2024-01-15T12:30:45.123Z').getTime() * NANO_SECOND_MULTIPLIER;
-			const fifteenMinutesNs = 15 * 60 * 1000 * NANO_SECOND_MULTIPLIER;
-
-			expect(result.current.lastComputedMinMax.maxTime).toBe(expectedMaxTime);
-			expect(result.current.lastComputedMinMax.minTime).toBe(
-				expectedMaxTime - fifteenMinutesNs,
-			);
-		});
-
-		it('should update lastRefreshTimestamp', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-			const beforeTimestamp = Date.now();
-
-			act(() => {
-				result.current.computeAndStoreMinMax();
-			});
-
-			expect(result.current.lastRefreshTimestamp).toBeGreaterThanOrEqual(
-				beforeTimestamp,
-			);
-		});
-
-		it('should return the computed values', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-
-			let returnedValue: { minTime: number; maxTime: number } | undefined;
-			act(() => {
-				returnedValue = result.current.computeAndStoreMinMax();
-			});
-
-			expect(returnedValue).toStrictEqual(result.current.lastComputedMinMax);
-		});
-
-		it('should NOT round custom time range values to minute boundaries', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-			// Use timestamps that are NOT on minute boundaries (12:30:45.123)
-			// If rounding occurred, these would change to 12:30:00.000
-			const minTimeWithSeconds =
-				new Date('2024-01-15T12:15:45.123Z').getTime() * NANO_SECOND_MULTIPLIER;
-			const maxTimeWithSeconds =
-				new Date('2024-01-15T12:30:45.123Z').getTime() * NANO_SECOND_MULTIPLIER;
-
-			// What the values would be if rounded down to minute boundary
-			const minTimeRounded =
-				new Date('2024-01-15T12:15:00.000Z').getTime() * NANO_SECOND_MULTIPLIER;
-			const maxTimeRounded =
-				new Date('2024-01-15T12:30:00.000Z').getTime() * NANO_SECOND_MULTIPLIER;
-
-			const customTime = createCustomTimeRange(
-				minTimeWithSeconds,
-				maxTimeWithSeconds,
-			);
-
-			act(() => {
-				result.current.setSelectedTime(customTime);
-			});
-
-			let returnedValue: { minTime: number; maxTime: number } | undefined;
-			act(() => {
-				returnedValue = result.current.computeAndStoreMinMax();
-			});
-
-			// Should return exact values, NOT rounded values
-			expect(returnedValue?.minTime).toBe(minTimeWithSeconds);
-			expect(returnedValue?.maxTime).toBe(maxTimeWithSeconds);
-			expect(returnedValue?.minTime).not.toBe(minTimeRounded);
-			expect(returnedValue?.maxTime).not.toBe(maxTimeRounded);
-
-			// lastComputedMinMax should also have exact values
-			expect(result.current.lastComputedMinMax.minTime).toBe(minTimeWithSeconds);
-			expect(result.current.lastComputedMinMax.maxTime).toBe(maxTimeWithSeconds);
-		});
-	});
-
-	describe('updateRefreshTimestamp', () => {
-		beforeEach(() => {
-			jest.useFakeTimers();
-			jest.setSystemTime(new Date('2024-01-15T12:30:45.123Z'));
-		});
-
-		afterEach(() => {
-			jest.useRealTimers();
-		});
-
-		it('should update lastRefreshTimestamp to current time', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-
-			act(() => {
-				result.current.updateRefreshTimestamp();
-			});
-
-			expect(result.current.lastRefreshTimestamp).toBe(Date.now());
-		});
-
-		it('should not modify lastComputedMinMax', () => {
-			const { result } = renderHook(() => useGlobalTimeStore());
-
-			act(() => {
-				result.current.computeAndStoreMinMax();
-			});
-
-			const beforeMinMax = { ...result.current.lastComputedMinMax };
-
-			act(() => {
-				jest.advanceTimersByTime(5000);
-				result.current.updateRefreshTimestamp();
-			});
-
-			expect(result.current.lastComputedMinMax).toStrictEqual(beforeMinMax);
-		});
-	});
-
-	describe('store isolation', () => {
-		it('should share state between multiple hook instances', () => {
-			const { result: result1 } = renderHook(() => useGlobalTimeStore());
-			const { result: result2 } = renderHook(() => useGlobalTimeStore());
-
-			act(() => {
-				result1.current.setSelectedTime('1h', 10000);
-			});
-
-			expect(result2.current.selectedTime).toBe('1h');
-			expect(result2.current.refreshInterval).toBe(10000);
-			expect(result2.current.isRefreshEnabled).toBe(true);
-		});
-	});
-
-	describe('setSelectedTime (min/max computation)', () => {
-		beforeEach(() => {
-			jest.useFakeTimers();
-			jest.setSystemTime(new Date('2024-01-15T12:00:00.000Z'));
-		});
-
-		afterEach(() => {
-			jest.useRealTimers();
-		});
-
-		it('should compute and store min/max for relative time on setSelectedTime', () => {
-			const wrapper = createIsolatedWrapper();
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			// Initial state has 0 values
-			expect(result.current.lastComputedMinMax.maxTime).toBe(0);
-
-			act(() => {
-				result.current.setSelectedTime('15m');
-			});
-
-			// Should have computed values immediately
-			const expectedMaxTime =
-				new Date('2024-01-15T12:00:00.000Z').getTime() * NANO_SECOND_MULTIPLIER;
-			const fifteenMinutesNs = 15 * 60 * 1000 * NANO_SECOND_MULTIPLIER;
-
-			expect(result.current.lastComputedMinMax.maxTime).toBe(expectedMaxTime);
-			expect(result.current.lastComputedMinMax.minTime).toBe(
-				expectedMaxTime - fifteenMinutesNs,
-			);
-		});
-
-		it('should compute and store min/max for custom time on setSelectedTime', () => {
-			const wrapper = createIsolatedWrapper();
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			const minTime = 1000000000;
-			const maxTime = 2000000000;
-			const customTime = createCustomTimeRange(minTime, maxTime);
-
-			act(() => {
-				result.current.setSelectedTime(customTime);
-			});
-
-			expect(result.current.lastComputedMinMax.minTime).toBe(minTime);
-			expect(result.current.lastComputedMinMax.maxTime).toBe(maxTime);
-		});
-
-		it('should update lastRefreshTimestamp on setSelectedTime', () => {
-			const wrapper = createIsolatedWrapper();
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			expect(result.current.lastRefreshTimestamp).toBe(0);
-
-			act(() => {
-				result.current.setSelectedTime('15m');
-			});
-
-			expect(result.current.lastRefreshTimestamp).toBe(Date.now());
-		});
-
-		it('should skip update when same selectedTime and refreshInterval', () => {
-			const wrapper = createIsolatedWrapper({
-				selectedTime: '15m',
-				refreshInterval: 5000,
-			});
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			// Set initial values
-			act(() => {
-				result.current.setSelectedTime('15m', 5000);
-			});
-
-			const initialTimestamp = result.current.lastRefreshTimestamp;
-
-			// Advance time
-			act(() => {
-				jest.advanceTimersByTime(1000);
-			});
-
-			// Try to set same values again
-			act(() => {
-				result.current.setSelectedTime('15m', 5000);
-			});
-
-			// Should not have updated timestamp (no state change)
-			expect(result.current.lastRefreshTimestamp).toBe(initialTimestamp);
-		});
-	});
-
-	describe('computeAndStoreMinMax (refresh behavior)', () => {
-		beforeEach(() => {
-			jest.useFakeTimers();
-			jest.setSystemTime(new Date('2024-01-15T12:00:00.000Z'));
-		});
-
-		afterEach(() => {
-			jest.useRealTimers();
-		});
-
-		it('should skip computation and return lastComputedMinMax when refresh is enabled', () => {
-			const wrapper = createIsolatedWrapper({
-				selectedTime: '15m',
-				refreshInterval: 5000,
-			});
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			// Get initial values via getMinMaxTime (which computes for refresh enabled)
-			const initialMinMax = result.current.getMinMaxTime();
-
-			// Advance time
-			act(() => {
-				jest.advanceTimersByTime(60000);
-			});
-
-			// computeAndStoreMinMax should skip computation when refresh is enabled
-			let returnedValue: { minTime: number; maxTime: number } | undefined;
-			act(() => {
-				returnedValue = result.current.computeAndStoreMinMax();
-			});
-
-			// Should return the current lastComputedMinMax, not fresh computation
-			expect(returnedValue).toStrictEqual(initialMinMax);
-		});
-
-		it('should compute fresh values when refresh is disabled', () => {
-			const wrapper = createIsolatedWrapper({
-				selectedTime: '15m',
-				refreshInterval: 0, // Disabled
-			});
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			// Get initial values
-			act(() => {
-				result.current.computeAndStoreMinMax();
-			});
-			const initialMinMax = { ...result.current.lastComputedMinMax };
-
-			// Advance time past minute boundary
-			act(() => {
-				jest.advanceTimersByTime(60000);
-			});
-
-			// computeAndStoreMinMax should compute fresh values
-			let returnedValue: { minTime: number; maxTime: number } | undefined;
-			act(() => {
-				returnedValue = result.current.computeAndStoreMinMax();
-			});
-
-			// Should return new values
-			expect(returnedValue?.maxTime).toBe(
-				initialMinMax.maxTime + 60000 * NANO_SECOND_MULTIPLIER,
-			);
-		});
-	});
-});

frontend/src/store/globalTime/__tests__/hooks.test.tsx

@@ -1,190 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { ReactNode } from 'react';
-
-import { createGlobalTimeStore } from '../globalTimeStore';
-import { GlobalTimeContext } from '../GlobalTimeContext';
-import {
-	useGlobalTime,
-	useGlobalTimeStoreApi,
-	useIsCustomTimeRange,
-	useLastComputedMinMax,
-} from '../hooks';
-import { useComputedMinMaxSync } from '../useComputedMinMaxSync';
-import { createCustomTimeRange } from '../utils';
-
-describe('useGlobalTime', () => {
-	it('should return full store state without selector', () => {
-		const { result } = renderHook(() => useGlobalTime());
-
-		expect(result.current.selectedTime).toBeDefined();
-		expect(result.current.setSelectedTime).toBeInstanceOf(Function);
-	});
-
-	it('should return selected value with selector', () => {
-		const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime));
-
-		expect(typeof result.current).toBe('string');
-	});
-
-	it('should use context store when provided', () => {
-		const contextStore = createGlobalTimeStore({ selectedTime: '1h' });
-
-		const wrapper = ({ children }: { children: ReactNode }): JSX.Element => (
-			<GlobalTimeContext.Provider value={contextStore}>
-				{children}
-			</GlobalTimeContext.Provider>
-		);
-
-		const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-			wrapper,
-		});
-
-		expect(result.current).toBe('1h');
-	});
-});
-
-describe('useIsCustomTimeRange', () => {
-	it('should return false for relative time', () => {
-		const { result } = renderHook(() => useIsCustomTimeRange());
-
-		expect(result.current).toBe(false);
-	});
-
-	it('should return true for custom time range', () => {
-		const customTime = createCustomTimeRange(1000000000, 2000000000);
-		const contextStore = createGlobalTimeStore({ selectedTime: customTime });
-
-		const { result } = renderHook(() => useIsCustomTimeRange(), {
-			wrapper: ({ children }: { children: ReactNode }): JSX.Element => (
-				<GlobalTimeContext.Provider value={contextStore}>
-					{children}
-				</GlobalTimeContext.Provider>
-			),
-		});
-
-		expect(result.current).toBe(true);
-	});
-});
-
-describe('useGlobalTimeStoreApi', () => {
-	it('should return store API', () => {
-		const { result } = renderHook(() => useGlobalTimeStoreApi());
-
-		expect(result.current.getState).toBeInstanceOf(Function);
-		expect(result.current.subscribe).toBeInstanceOf(Function);
-	});
-});
-
-describe('useLastComputedMinMax', () => {
-	it('should return lastComputedMinMax from store', () => {
-		const contextStore = createGlobalTimeStore({ selectedTime: '15m' });
-
-		// Compute the min/max first
-		contextStore.getState().computeAndStoreMinMax();
-
-		const { result } = renderHook(() => useLastComputedMinMax(), {
-			wrapper: ({ children }: { children: ReactNode }): JSX.Element => (
-				<GlobalTimeContext.Provider value={contextStore}>
-					{children}
-				</GlobalTimeContext.Provider>
-			),
-		});
-
-		expect(result.current).toStrictEqual(
-			contextStore.getState().lastComputedMinMax,
-		);
-	});
-
-	it('should update when store changes', () => {
-		jest.useFakeTimers();
-		jest.setSystemTime(new Date('2024-01-15T12:30:45.123Z'));
-
-		const contextStore = createGlobalTimeStore({ selectedTime: '15m' });
-		contextStore.getState().computeAndStoreMinMax();
-
-		const { result } = renderHook(() => useLastComputedMinMax(), {
-			wrapper: ({ children }: { children: ReactNode }): JSX.Element => (
-				<GlobalTimeContext.Provider value={contextStore}>
-					{children}
-				</GlobalTimeContext.Provider>
-			),
-		});
-
-		const firstValue = { ...result.current };
-
-		// Change time and recompute
-		act(() => {
-			jest.advanceTimersByTime(60000); // Advance 1 minute
-			contextStore.getState().computeAndStoreMinMax();
-		});
-
-		expect(result.current).not.toStrictEqual(firstValue);
-
-		jest.useRealTimers();
-	});
-});
-
-describe('useComputedMinMaxSync', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-		jest.setSystemTime(new Date('2024-01-15T12:30:45.123Z'));
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-	});
-
-	it('should compute min/max on mount when store has zero values', () => {
-		const contextStore = createGlobalTimeStore({ selectedTime: '15m' });
-
-		expect(contextStore.getState().lastComputedMinMax).toStrictEqual({
-			minTime: 0,
-			maxTime: 0,
-		});
-
-		renderHook(() => useComputedMinMaxSync(contextStore));
-
-		// Should have computed values now
-		expect(contextStore.getState().lastComputedMinMax.maxTime).toBeGreaterThan(0);
-		expect(contextStore.getState().lastComputedMinMax.minTime).toBeGreaterThan(0);
-	});
-
-	it('should NOT recompute when store already has values', () => {
-		const contextStore = createGlobalTimeStore({ selectedTime: '15m' });
-
-		contextStore.getState().computeAndStoreMinMax();
-		const initialMinMax = { ...contextStore.getState().lastComputedMinMax };
-		const initialTimestamp = contextStore.getState().lastRefreshTimestamp;
-
-		jest.advanceTimersByTime(60000);
-
-		renderHook(() => useComputedMinMaxSync(contextStore));
-
-		// Should NOT have recomputed - values should be unchanged
-		expect(contextStore.getState().lastComputedMinMax).toStrictEqual(
-			initialMinMax,
-		);
-		expect(contextStore.getState().lastRefreshTimestamp).toBe(initialTimestamp);
-	});
-
-	it('should only compute on mount, not on re-renders', () => {
-		const contextStore = createGlobalTimeStore({ selectedTime: '15m' });
-
-		const { rerender } = renderHook(() => useComputedMinMaxSync(contextStore));
-
-		const afterMountMinMax = { ...contextStore.getState().lastComputedMinMax };
-		const afterMountTimestamp = contextStore.getState().lastRefreshTimestamp;
-
-		jest.advanceTimersByTime(60000);
-
-		rerender();
-
-		// Should NOT have recomputed on re-render
-		expect(contextStore.getState().lastComputedMinMax).toStrictEqual(
-			afterMountMinMax,
-		);
-		expect(contextStore.getState().lastRefreshTimestamp).toBe(
-			afterMountTimestamp,
-		);
-	});
-});

frontend/src/store/globalTime/__tests__/useGlobalTimeQueryInvalidate.test.tsx

@@ -1,381 +0,0 @@
-import { act, renderHook, waitFor } from '@testing-library/react';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
-import { ReactNode } from 'react';
-
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-
-import { GlobalTimeProvider } from '../GlobalTimeContext';
-import { useGlobalTime } from '../hooks';
-import { GlobalTimeProviderOptions } from '../types';
-import { useGlobalTimeQueryInvalidate } from '../useGlobalTimeQueryInvalidate';
-import { createCustomTimeRange, NANO_SECOND_MULTIPLIER } from '../utils';
-
-const createTestQueryClient = (): QueryClient =>
-	new QueryClient({
-		defaultOptions: {
-			queries: {
-				retry: false,
-				cacheTime: Infinity,
-			},
-		},
-	});
-
-const createWrapper = (
-	providerProps: GlobalTimeProviderOptions,
-	queryClient: QueryClient,
-) => {
-	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
-		return (
-			<QueryClientProvider client={queryClient}>
-				<NuqsTestingAdapter>
-					<GlobalTimeProvider {...providerProps}>{children}</GlobalTimeProvider>
-				</NuqsTestingAdapter>
-			</QueryClientProvider>
-		);
-	};
-};
-
-describe('useGlobalTimeQueryInvalidate', () => {
-	let queryClient: QueryClient;
-
-	beforeEach(() => {
-		queryClient = createTestQueryClient();
-		jest.useFakeTimers();
-		jest.setSystemTime(new Date('2024-01-15T12:30:45.123Z'));
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-		queryClient.clear();
-	});
-
-	it('should return a function', () => {
-		const wrapper = createWrapper({ initialTime: '15m' }, queryClient);
-		const { result } = renderHook(() => useGlobalTimeQueryInvalidate(), {
-			wrapper,
-		});
-
-		expect(typeof result.current).toBe('function');
-	});
-
-	it('should call computeAndStoreMinMax before invalidating queries (refresh disabled)', async () => {
-		const wrapper = createWrapper(
-			{ initialTime: '15m', refreshInterval: 0 }, // refresh disabled so computeAndStoreMinMax computes fresh values
-			queryClient,
-		);
-		const { result } = renderHook(
-			() => ({
-				invalidate: useGlobalTimeQueryInvalidate(),
-				globalTime: useGlobalTime(),
-			}),
-			{ wrapper },
-		);
-
-		// Initial computation - need to call computeAndStoreMinMax first
-		act(() => {
-			result.current.globalTime.computeAndStoreMinMax();
-		});
-		const initialMinMax = { ...result.current.globalTime.lastComputedMinMax };
-
-		// Advance time past minute boundary
-		act(() => {
-			jest.advanceTimersByTime(60000);
-		});
-
-		// Call invalidate - should compute fresh values when refresh is disabled
-		await act(async () => {
-			await result.current.invalidate();
-		});
-
-		// lastComputedMinMax should have been updated
-		expect(result.current.globalTime.lastComputedMinMax.maxTime).toBe(
-			initialMinMax.maxTime + 60000 * NANO_SECOND_MULTIPLIER,
-		);
-	});
-
-	it('should invalidate queries with AUTO_REFRESH_QUERY key', async () => {
-		const mockQueryFn = jest.fn().mockResolvedValue({ data: 'test' });
-
-		const wrapper = createWrapper({ initialTime: '15m' }, queryClient);
-
-		// Set up a query with AUTO_REFRESH_QUERY key
-		const { result: queryResult } = renderHook(
-			() =>
-				useQuery({
-					queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'test-query'],
-					queryFn: mockQueryFn,
-				}),
-			{ wrapper },
-		);
-
-		// Wait for initial query to complete
-		await waitFor(() => {
-			expect(queryResult.current.isSuccess).toBe(true);
-		});
-
-		expect(mockQueryFn).toHaveBeenCalledTimes(1);
-
-		// Now render the invalidate hook and call it
-		const { result: invalidateResult } = renderHook(
-			() => useGlobalTimeQueryInvalidate(),
-			{ wrapper },
-		);
-
-		await act(async () => {
-			await invalidateResult.current();
-		});
-
-		// Query should have been refetched
-		await waitFor(() => {
-			expect(mockQueryFn).toHaveBeenCalledTimes(2);
-		});
-	});
-
-	it('should NOT invalidate queries without AUTO_REFRESH_QUERY key', async () => {
-		const autoRefreshQueryFn = jest.fn().mockResolvedValue({ data: 'auto' });
-		const regularQueryFn = jest.fn().mockResolvedValue({ data: 'regular' });
-
-		const wrapper = createWrapper({ initialTime: '15m' }, queryClient);
-
-		// Set up both types of queries
-		const { result: autoRefreshQuery } = renderHook(
-			() =>
-				useQuery({
-					queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'auto-query'],
-					queryFn: autoRefreshQueryFn,
-				}),
-			{ wrapper },
-		);
-
-		const { result: regularQuery } = renderHook(
-			() =>
-				useQuery({
-					queryKey: ['regular-query'],
-					queryFn: regularQueryFn,
-				}),
-			{ wrapper },
-		);
-
-		// Wait for initial queries to complete
-		await waitFor(() => {
-			expect(autoRefreshQuery.current.isSuccess).toBe(true);
-			expect(regularQuery.current.isSuccess).toBe(true);
-		});
-
-		expect(autoRefreshQueryFn).toHaveBeenCalledTimes(1);
-		expect(regularQueryFn).toHaveBeenCalledTimes(1);
-
-		// Call invalidate
-		const { result: invalidateResult } = renderHook(
-			() => useGlobalTimeQueryInvalidate(),
-			{ wrapper },
-		);
-
-		await act(async () => {
-			await invalidateResult.current();
-		});
-
-		// Only auto-refresh query should be refetched
-		await waitFor(() => {
-			expect(autoRefreshQueryFn).toHaveBeenCalledTimes(2);
-		});
-
-		// Regular query should NOT be refetched
-		expect(regularQueryFn).toHaveBeenCalledTimes(1);
-	});
-
-	it('should use exact custom time values (not rounded) when invalidating', async () => {
-		// Use timestamps that are NOT on minute boundaries
-		const minTimeWithSeconds =
-			new Date('2024-01-15T12:15:45.123Z').getTime() * NANO_SECOND_MULTIPLIER;
-		const maxTimeWithSeconds =
-			new Date('2024-01-15T12:30:45.123Z').getTime() * NANO_SECOND_MULTIPLIER;
-
-		const customTime = createCustomTimeRange(
-			minTimeWithSeconds,
-			maxTimeWithSeconds,
-		);
-
-		const wrapper = createWrapper({ initialTime: customTime }, queryClient);
-
-		const { result } = renderHook(
-			() => ({
-				invalidate: useGlobalTimeQueryInvalidate(),
-				globalTime: useGlobalTime(),
-			}),
-			{ wrapper },
-		);
-
-		// Call invalidate
-		await act(async () => {
-			await result.current.invalidate();
-		});
-
-		// Verify custom time values are NOT rounded
-		expect(result.current.globalTime.lastComputedMinMax.minTime).toBe(
-			minTimeWithSeconds,
-		);
-		expect(result.current.globalTime.lastComputedMinMax.maxTime).toBe(
-			maxTimeWithSeconds,
-		);
-	});
-
-	it('should invalidate multiple AUTO_REFRESH_QUERY queries at once', async () => {
-		const queryFn1 = jest.fn().mockResolvedValue({ data: 'query1' });
-		const queryFn2 = jest.fn().mockResolvedValue({ data: 'query2' });
-		const queryFn3 = jest.fn().mockResolvedValue({ data: 'query3' });
-
-		const wrapper = createWrapper({ initialTime: '15m' }, queryClient);
-
-		// Set up multiple auto-refresh queries
-		renderHook(
-			() =>
-				useQuery({
-					queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'query1'],
-					queryFn: queryFn1,
-				}),
-			{ wrapper },
-		);
-
-		renderHook(
-			() =>
-				useQuery({
-					queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'query2'],
-					queryFn: queryFn2,
-				}),
-			{ wrapper },
-		);
-
-		renderHook(
-			() =>
-				useQuery({
-					queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'query3'],
-					queryFn: queryFn3,
-				}),
-			{ wrapper },
-		);
-
-		// Wait for initial queries
-		await waitFor(() => {
-			expect(queryFn1).toHaveBeenCalledTimes(1);
-			expect(queryFn2).toHaveBeenCalledTimes(1);
-			expect(queryFn3).toHaveBeenCalledTimes(1);
-		});
-
-		// Call invalidate
-		const { result } = renderHook(() => useGlobalTimeQueryInvalidate(), {
-			wrapper,
-		});
-
-		await act(async () => {
-			await result.current();
-		});
-
-		// All queries should be refetched
-		await waitFor(() => {
-			expect(queryFn1).toHaveBeenCalledTimes(2);
-			expect(queryFn2).toHaveBeenCalledTimes(2);
-			expect(queryFn3).toHaveBeenCalledTimes(2);
-		});
-	});
-
-	describe('scoped invalidation with store name', () => {
-		it('should only invalidate queries matching store name', async () => {
-			const namedQueryFn = jest.fn().mockResolvedValue({ data: 'named' });
-			const unnamedQueryFn = jest.fn().mockResolvedValue({ data: 'unnamed' });
-
-			const wrapper = createWrapper(
-				{ name: 'drawer', initialTime: '15m' },
-				queryClient,
-			);
-
-			// Query with matching name
-			renderHook(
-				() =>
-					useQuery({
-						queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'drawer', 'named-query'],
-						queryFn: namedQueryFn,
-					}),
-				{ wrapper },
-			);
-
-			// Query without name (different store)
-			renderHook(
-				() =>
-					useQuery({
-						queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'unnamed-query'],
-						queryFn: unnamedQueryFn,
-					}),
-				{ wrapper },
-			);
-
-			await waitFor(() => {
-				expect(namedQueryFn).toHaveBeenCalledTimes(1);
-				expect(unnamedQueryFn).toHaveBeenCalledTimes(1);
-			});
-
-			// Call invalidate
-			const { result } = renderHook(() => useGlobalTimeQueryInvalidate(), {
-				wrapper,
-			});
-
-			await act(async () => {
-				await result.current();
-			});
-
-			// Only named query should be refetched
-			await waitFor(() => {
-				expect(namedQueryFn).toHaveBeenCalledTimes(2);
-			});
-
-			// Unnamed query should NOT be refetched
-			expect(unnamedQueryFn).toHaveBeenCalledTimes(1);
-		});
-
-		it('should invalidate all queries for unnamed store (backward compatible)', async () => {
-			const queryFn1 = jest.fn().mockResolvedValue({ data: 'query1' });
-			const queryFn2 = jest.fn().mockResolvedValue({ data: 'query2' });
-
-			// Unnamed store (no name prop)
-			const wrapper = createWrapper({ initialTime: '15m' }, queryClient);
-
-			renderHook(
-				() =>
-					useQuery({
-						queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'query1'],
-						queryFn: queryFn1,
-					}),
-				{ wrapper },
-			);
-
-			renderHook(
-				() =>
-					useQuery({
-						queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'query2'],
-						queryFn: queryFn2,
-					}),
-				{ wrapper },
-			);
-
-			await waitFor(() => {
-				expect(queryFn1).toHaveBeenCalledTimes(1);
-				expect(queryFn2).toHaveBeenCalledTimes(1);
-			});
-
-			const { result } = renderHook(() => useGlobalTimeQueryInvalidate(), {
-				wrapper,
-			});
-
-			await act(async () => {
-				await result.current();
-			});
-
-			// Both should be refetched
-			await waitFor(() => {
-				expect(queryFn1).toHaveBeenCalledTimes(2);
-				expect(queryFn2).toHaveBeenCalledTimes(2);
-			});
-		});
-	});
-});

frontend/src/store/globalTime/__tests__/useIsGlobalTimeQueryRefreshing.test.tsx

@@ -1,323 +0,0 @@
-import { act, renderHook, waitFor } from '@testing-library/react';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
-import { ReactNode } from 'react';
-
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-
-import { GlobalTimeProvider } from '../GlobalTimeContext';
-import { GlobalTimeProviderOptions } from '../types';
-import { useIsGlobalTimeQueryRefreshing } from '../useIsGlobalTimeQueryRefreshing';
-
-const createTestQueryClient = (): QueryClient =>
-	new QueryClient({
-		defaultOptions: {
-			queries: {
-				retry: false,
-			},
-		},
-	});
-
-const createWrapper = (
-	queryClient: QueryClient,
-): (({ children }: { children: ReactNode }) => JSX.Element) => {
-	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
-		return (
-			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-		);
-	};
-};
-
-const createProviderWrapper = (
-	providerProps: GlobalTimeProviderOptions,
-	queryClient: QueryClient,
-): (({ children }: { children: ReactNode }) => JSX.Element) => {
-	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
-		return (
-			<QueryClientProvider client={queryClient}>
-				<NuqsTestingAdapter>
-					<GlobalTimeProvider {...providerProps}>{children}</GlobalTimeProvider>
-				</NuqsTestingAdapter>
-			</QueryClientProvider>
-		);
-	};
-};
-
-describe('useIsGlobalTimeQueryRefreshing', () => {
-	let queryClient: QueryClient;
-
-	beforeEach(() => {
-		queryClient = createTestQueryClient();
-	});
-
-	afterEach(() => {
-		queryClient.clear();
-	});
-
-	it('should return false when no queries are fetching', () => {
-		const wrapper = createWrapper(queryClient);
-		const { result } = renderHook(() => useIsGlobalTimeQueryRefreshing(), {
-			wrapper,
-		});
-
-		expect(result.current).toBe(false);
-	});
-
-	it('should return true when AUTO_REFRESH_QUERY is fetching', async () => {
-		let resolveQuery: (value: unknown) => void;
-		const queryPromise = new Promise((resolve) => {
-			resolveQuery = resolve;
-		});
-
-		const wrapper = createWrapper(queryClient);
-
-		// Start the auto-refresh query
-		renderHook(
-			() =>
-				useQuery({
-					queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'test'],
-					queryFn: () => queryPromise,
-				}),
-			{ wrapper },
-		);
-
-		// Check if refreshing hook detects it
-		const { result } = renderHook(() => useIsGlobalTimeQueryRefreshing(), {
-			wrapper,
-		});
-
-		// Should be true while fetching
-		expect(result.current).toBe(true);
-
-		// Resolve the query
-		act(() => {
-			resolveQuery({ data: 'done' });
-		});
-
-		// Should be false after fetching completes
-		await waitFor(() => {
-			expect(result.current).toBe(false);
-		});
-	});
-
-	it('should return false when non-AUTO_REFRESH_QUERY is fetching', async () => {
-		let resolveQuery: (value: unknown) => void;
-		const queryPromise = new Promise((resolve) => {
-			resolveQuery = resolve;
-		});
-
-		const wrapper = createWrapper(queryClient);
-
-		// Start a regular query (not auto-refresh)
-		renderHook(
-			() =>
-				useQuery({
-					queryKey: ['regular-query'],
-					queryFn: () => queryPromise,
-				}),
-			{ wrapper },
-		);
-
-		// Check if refreshing hook detects it
-		const { result } = renderHook(() => useIsGlobalTimeQueryRefreshing(), {
-			wrapper,
-		});
-
-		// Should be false - not an auto-refresh query
-		expect(result.current).toBe(false);
-
-		// Cleanup
-		act(() => {
-			resolveQuery({ data: 'done' });
-		});
-	});
-
-	it('should return true when multiple AUTO_REFRESH_QUERY queries are fetching', async () => {
-		let resolveQuery1: (value: unknown) => void;
-		let resolveQuery2: (value: unknown) => void;
-		const queryPromise1 = new Promise((resolve) => {
-			resolveQuery1 = resolve;
-		});
-		const queryPromise2 = new Promise((resolve) => {
-			resolveQuery2 = resolve;
-		});
-
-		const wrapper = createWrapper(queryClient);
-
-		// Start multiple auto-refresh queries
-		renderHook(
-			() =>
-				useQuery({
-					queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'query1'],
-					queryFn: () => queryPromise1,
-				}),
-			{ wrapper },
-		);
-
-		renderHook(
-			() =>
-				useQuery({
-					queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'query2'],
-					queryFn: () => queryPromise2,
-				}),
-			{ wrapper },
-		);
-
-		const { result } = renderHook(() => useIsGlobalTimeQueryRefreshing(), {
-			wrapper,
-		});
-
-		// Should be true while fetching
-		expect(result.current).toBe(true);
-
-		// Resolve first query
-		act(() => {
-			resolveQuery1({ data: 'done1' });
-		});
-
-		// Should still be true (second query still fetching)
-		await waitFor(() => {
-			expect(result.current).toBe(true);
-		});
-
-		// Resolve second query
-		act(() => {
-			resolveQuery2({ data: 'done2' });
-		});
-
-		// Should be false after all complete
-		await waitFor(() => {
-			expect(result.current).toBe(false);
-		});
-	});
-
-	it('should only track AUTO_REFRESH_QUERY, not other queries', async () => {
-		let resolveAutoRefresh: (value: unknown) => void;
-		let resolveRegular: (value: unknown) => void;
-		const autoRefreshPromise = new Promise((resolve) => {
-			resolveAutoRefresh = resolve;
-		});
-		const regularPromise = new Promise((resolve) => {
-			resolveRegular = resolve;
-		});
-
-		const wrapper = createWrapper(queryClient);
-
-		// Start both types of queries
-		renderHook(
-			() =>
-				useQuery({
-					queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'auto'],
-					queryFn: () => autoRefreshPromise,
-				}),
-			{ wrapper },
-		);
-
-		renderHook(
-			() =>
-				useQuery({
-					queryKey: ['regular'],
-					queryFn: () => regularPromise,
-				}),
-			{ wrapper },
-		);
-
-		const { result } = renderHook(() => useIsGlobalTimeQueryRefreshing(), {
-			wrapper,
-		});
-
-		// Should be true (auto-refresh is fetching)
-		expect(result.current).toBe(true);
-
-		// Resolve auto-refresh query
-		act(() => {
-			resolveAutoRefresh({ data: 'done' });
-		});
-
-		// Should be false even though regular query is still fetching
-		await waitFor(() => {
-			expect(result.current).toBe(false);
-		});
-
-		// Cleanup
-		act(() => {
-			resolveRegular({ data: 'done' });
-		});
-	});
-
-	describe('scoped refreshing check with store name', () => {
-		it('should return true only for queries matching store name', async () => {
-			let resolveNamedQuery: (value: unknown) => void;
-			const namedQueryPromise = new Promise((resolve) => {
-				resolveNamedQuery = resolve;
-			});
-
-			const wrapper = createProviderWrapper(
-				{ name: 'drawer', initialTime: '15m' },
-				queryClient,
-			);
-
-			// Start query with matching name
-			renderHook(
-				() =>
-					useQuery({
-						queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'drawer', 'test'],
-						queryFn: () => namedQueryPromise,
-					}),
-				{ wrapper },
-			);
-
-			// Check refreshing status
-			const { result } = renderHook(() => useIsGlobalTimeQueryRefreshing(), {
-				wrapper,
-			});
-
-			// Should be true - named query is fetching
-			expect(result.current).toBe(true);
-
-			// Resolve the query
-			act(() => {
-				resolveNamedQuery({ data: 'done' });
-			});
-
-			await waitFor(() => {
-				expect(result.current).toBe(false);
-			});
-		});
-
-		it('should return false when only different store queries are fetching', async () => {
-			let resolveOtherQuery: (value: unknown) => void;
-			const otherQueryPromise = new Promise((resolve) => {
-				resolveOtherQuery = resolve;
-			});
-
-			const wrapper = createProviderWrapper(
-				{ name: 'drawer', initialTime: '15m' },
-				queryClient,
-			);
-
-			// Start query with different name (belongs to different store)
-			renderHook(
-				() =>
-					useQuery({
-						queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'other-store', 'test'],
-						queryFn: () => otherQueryPromise,
-					}),
-				{ wrapper },
-			);
-
-			// Check refreshing status for 'drawer' store
-			const { result } = renderHook(() => useIsGlobalTimeQueryRefreshing(), {
-				wrapper,
-			});
-
-			// Should be false - the fetching query belongs to 'other-store', not 'drawer'
-			expect(result.current).toBe(false);
-
-			// Cleanup
-			act(() => {
-				resolveOtherQuery({ data: 'done' });
-			});
-		});
-	});
-});

frontend/src/store/globalTime/__tests__/useQueryCacheSync.test.tsx

@@ -1,190 +0,0 @@
-import { act, renderHook, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { ReactNode } from 'react';
-
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-
-import { createGlobalTimeStore, GlobalTimeStoreApi } from '../globalTimeStore';
-import { useQueryCacheSync } from '../useQueryCacheSync';
-
-function createTestQueryClient(): QueryClient {
-	return new QueryClient({
-		defaultOptions: {
-			queries: {
-				retry: false,
-			},
-		},
-	});
-}
-
-function createWrapper(
-	queryClient: QueryClient,
-): ({ children }: { children: ReactNode }) => JSX.Element {
-	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
-		return (
-			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-		);
-	};
-}
-
-describe('useQueryCacheSync', () => {
-	let store: GlobalTimeStoreApi;
-	let queryClient: QueryClient;
-
-	beforeEach(() => {
-		store = createGlobalTimeStore();
-		queryClient = createTestQueryClient();
-		jest.useFakeTimers();
-		jest.setSystemTime(new Date('2024-01-15T12:30:45.123Z'));
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-		queryClient.clear();
-	});
-
-	it('should update lastRefreshTimestamp when auto-refresh query succeeds', async () => {
-		// Initialize store
-		act(() => {
-			store.getState().computeAndStoreMinMax();
-		});
-
-		const initialTimestamp = store.getState().lastRefreshTimestamp;
-
-		// Advance time
-		act(() => {
-			jest.advanceTimersByTime(5000);
-		});
-
-		// Render the hook
-		renderHook(() => useQueryCacheSync(store), {
-			wrapper: createWrapper(queryClient),
-		});
-
-		// Simulate a successful auto-refresh query
-		await act(async () => {
-			await queryClient.fetchQuery({
-				queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'test'],
-				queryFn: () => Promise.resolve({ data: 'test' }),
-			});
-		});
-
-		await waitFor(() => {
-			expect(store.getState().lastRefreshTimestamp).toBeGreaterThan(
-				initialTimestamp,
-			);
-		});
-	});
-
-	it('should not update timestamp for non-auto-refresh queries', async () => {
-		act(() => {
-			store.getState().computeAndStoreMinMax();
-		});
-
-		const initialTimestamp = store.getState().lastRefreshTimestamp;
-
-		renderHook(() => useQueryCacheSync(store), {
-			wrapper: createWrapper(queryClient),
-		});
-
-		// Simulate a regular query (not auto-refresh)
-		await act(async () => {
-			await queryClient.fetchQuery({
-				queryKey: ['some-other-query'],
-				queryFn: () => Promise.resolve({ data: 'test' }),
-			});
-		});
-
-		expect(store.getState().lastRefreshTimestamp).toBe(initialTimestamp);
-	});
-
-	describe('store name filtering', () => {
-		it('should update timestamp for named store when matching query succeeds', async () => {
-			const store = createGlobalTimeStore({ name: 'drawer' });
-
-			act(() => {
-				store.getState().computeAndStoreMinMax();
-			});
-
-			const initialTimestamp = store.getState().lastRefreshTimestamp;
-
-			act(() => {
-				jest.advanceTimersByTime(5000);
-			});
-
-			renderHook(() => useQueryCacheSync(store), {
-				wrapper: createWrapper(queryClient),
-			});
-
-			// Query with matching name
-			await act(async () => {
-				await queryClient.fetchQuery({
-					queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'drawer', 'test'],
-					queryFn: () => Promise.resolve({ data: 'test' }),
-				});
-			});
-
-			await waitFor(() => {
-				expect(store.getState().lastRefreshTimestamp).toBeGreaterThan(
-					initialTimestamp,
-				);
-			});
-		});
-
-		it('should NOT update timestamp for named store when different name query succeeds', async () => {
-			const store = createGlobalTimeStore({ name: 'drawer' });
-
-			act(() => {
-				store.getState().computeAndStoreMinMax();
-			});
-
-			const initialTimestamp = store.getState().lastRefreshTimestamp;
-
-			act(() => {
-				jest.advanceTimersByTime(5000);
-			});
-
-			renderHook(() => useQueryCacheSync(store), {
-				wrapper: createWrapper(queryClient),
-			});
-
-			// Query with different name
-			await act(async () => {
-				await queryClient.fetchQuery({
-					queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'other-store', 'test'],
-					queryFn: () => Promise.resolve({ data: 'test' }),
-				});
-			});
-
-			expect(store.getState().lastRefreshTimestamp).toBe(initialTimestamp);
-		});
-
-		it('should NOT update timestamp for named store when unnamed query succeeds', async () => {
-			const store = createGlobalTimeStore({ name: 'drawer' });
-
-			act(() => {
-				store.getState().computeAndStoreMinMax();
-			});
-
-			const initialTimestamp = store.getState().lastRefreshTimestamp;
-
-			act(() => {
-				jest.advanceTimersByTime(5000);
-			});
-
-			renderHook(() => useQueryCacheSync(store), {
-				wrapper: createWrapper(queryClient),
-			});
-
-			// Query without name (unnamed store format)
-			await act(async () => {
-				await queryClient.fetchQuery({
-					queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, 'test-query'],
-					queryFn: () => Promise.resolve({ data: 'test' }),
-				});
-			});
-
-			expect(store.getState().lastRefreshTimestamp).toBe(initialTimestamp);
-		});
-	});
-});

frontend/src/store/globalTime/__tests__/utils.test.ts

@@ -1,15 +1,10 @@
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-
 import {
-	computeRounded5sMinMax,
 	createCustomTimeRange,
 	CUSTOM_TIME_SEPARATOR,
-	getAutoRefreshQueryKey,
 	isCustomTimeRange,
 	NANO_SECOND_MULTIPLIER,
 	parseCustomTimeRange,
 	parseSelectedTime,
-	roundDownTo5Seconds,
 } from '../utils';
 
 describe('globalTime/utils', () => {
@@ -141,184 +136,4 @@ describe('globalTime/utils', () => {
 			expect(result.minTime).toBe(now - oneDayNs);
 		});
 	});
-
-	describe('roundDownTo5Seconds', () => {
-		it('should round down timestamp to 5-second boundary', () => {
-			// 12:30:47.123Z -> 12:30:45.000Z
-			const inputNano = 1705321847123 * NANO_SECOND_MULTIPLIER;
-			const expectedNano = 1705321845000 * NANO_SECOND_MULTIPLIER;
-
-			expect(roundDownTo5Seconds(inputNano)).toBe(expectedNano);
-		});
-
-		it('should not change timestamp already at 5-second boundary', () => {
-			const inputNano = 1705321845000 * NANO_SECOND_MULTIPLIER; // 12:30:45.000
-
-			expect(roundDownTo5Seconds(inputNano)).toBe(inputNano);
-		});
-
-		it('should round 12:30:04.999 down to 12:30:00.000', () => {
-			const inputNano = 1705321804999 * NANO_SECOND_MULTIPLIER;
-			const expectedNano = 1705321800000 * NANO_SECOND_MULTIPLIER;
-
-			expect(roundDownTo5Seconds(inputNano)).toBe(expectedNano);
-		});
-
-		it('should round 12:30:09.999 down to 12:30:05.000', () => {
-			const inputNano = 1705321809999 * NANO_SECOND_MULTIPLIER;
-			const expectedNano = 1705321805000 * NANO_SECOND_MULTIPLIER;
-
-			expect(roundDownTo5Seconds(inputNano)).toBe(expectedNano);
-		});
-
-		it('should handle timestamp at exact 5-second intervals', () => {
-			// Test 5, 10, 15, 20, 25... second marks
-			const base = 1705321800000; // 12:30:00
-			for (let sec = 0; sec < 60; sec += 5) {
-				const inputNano = (base + sec * 1000) * NANO_SECOND_MULTIPLIER;
-				expect(roundDownTo5Seconds(inputNano)).toBe(inputNano);
-			}
-		});
-	});
-
-	describe('computeRounded5sMinMax', () => {
-		beforeEach(() => {
-			jest.useFakeTimers();
-			jest.setSystemTime(new Date('2024-01-15T12:30:47.123Z'));
-		});
-
-		afterEach(() => {
-			jest.useRealTimers();
-		});
-
-		it('should return maxTime rounded to 5-second boundary for relative time', () => {
-			const result = computeRounded5sMinMax('15m');
-
-			// maxTime should be rounded down to 12:30:45.000
-			const expectedMaxTime =
-				new Date('2024-01-15T12:30:45.000Z').getTime() * NANO_SECOND_MULTIPLIER;
-			expect(result.maxTime).toBe(expectedMaxTime);
-		});
-
-		it('should compute minTime based on 5s-rounded maxTime', () => {
-			const result = computeRounded5sMinMax('15m');
-
-			const expectedMaxTime =
-				new Date('2024-01-15T12:30:45.000Z').getTime() * NANO_SECOND_MULTIPLIER;
-			const fifteenMinutesNs = 15 * 60 * 1000 * NANO_SECOND_MULTIPLIER;
-
-			expect(result.minTime).toBe(expectedMaxTime - fifteenMinutesNs);
-		});
-
-		it('should return unchanged values for custom time range', () => {
-			const minTime = 1000000000;
-			const maxTime = 2000000000;
-			const customTime = createCustomTimeRange(minTime, maxTime);
-
-			const result = computeRounded5sMinMax(customTime);
-
-			expect(result.minTime).toBe(minTime);
-			expect(result.maxTime).toBe(maxTime);
-		});
-
-		it('should preserve duration for 1h relative time', () => {
-			const result = computeRounded5sMinMax('1h');
-
-			const oneHourNs = 60 * 60 * 1000 * NANO_SECOND_MULTIPLIER;
-			const duration = result.maxTime - result.minTime;
-
-			expect(duration).toBe(oneHourNs);
-		});
-	});
-
-	describe('getAutoRefreshQueryKey', () => {
-		it('should prefix with AUTO_REFRESH_QUERY constant', () => {
-			const result = getAutoRefreshQueryKey('15m', 'MY_QUERY');
-
-			expect(result[0]).toBe(REACT_QUERY_KEY.AUTO_REFRESH_QUERY);
-		});
-
-		it('should append selectedTime at end', () => {
-			const result = getAutoRefreshQueryKey('15m', 'MY_QUERY', 'param1');
-
-			expect(result).toStrictEqual([
-				REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-				'MY_QUERY',
-				'param1',
-				'15m',
-			]);
-		});
-
-		it('should handle no additional query parts', () => {
-			const result = getAutoRefreshQueryKey('1h');
-
-			expect(result).toStrictEqual([REACT_QUERY_KEY.AUTO_REFRESH_QUERY, '1h']);
-		});
-
-		it('should handle custom time range as selectedTime', () => {
-			const customTime = createCustomTimeRange(1000000000, 2000000000);
-			const result = getAutoRefreshQueryKey(customTime, 'METRICS');
-
-			expect(result).toStrictEqual([
-				REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-				'METRICS',
-				customTime,
-			]);
-		});
-
-		it('should handle object query parts', () => {
-			const params = { entityId: '123', filter: 'active' };
-			const result = getAutoRefreshQueryKey('15m', 'ENTITY', params);
-
-			expect(result).toStrictEqual([
-				REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-				'ENTITY',
-				params,
-				'15m',
-			]);
-		});
-	});
-
-	describe('getAutoRefreshQueryKey deprecation', () => {
-		const originalEnv = process.env.NODE_ENV;
-		const originalWarn = console.warn;
-
-		beforeEach(() => {
-			console.warn = jest.fn();
-		});
-
-		afterEach(() => {
-			process.env.NODE_ENV = originalEnv;
-			console.warn = originalWarn;
-		});
-
-		it('should log deprecation warning in development', () => {
-			process.env.NODE_ENV = 'development';
-
-			getAutoRefreshQueryKey('15m', 'TEST');
-
-			expect(console.warn).toHaveBeenCalledWith(
-				expect.stringContaining('deprecated'),
-			);
-		});
-
-		it('should NOT log deprecation warning in production', () => {
-			process.env.NODE_ENV = 'production';
-
-			getAutoRefreshQueryKey('15m', 'TEST');
-
-			expect(console.warn).not.toHaveBeenCalled();
-		});
-
-		it('should still return correct query key format', () => {
-			const result = getAutoRefreshQueryKey('15m', 'MY_QUERY', 'param1');
-
-			expect(result).toStrictEqual([
-				REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-				'MY_QUERY',
-				'param1',
-				'15m',
-			]);
-		});
-	});
 });

frontend/src/store/globalTime/globalTimeStore.ts

@@ -1,144 +1,32 @@
-import { createStore, StoreApi, useStore } from 'zustand';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
+import { create } from 'zustand';
 
 import {
-	GlobalTimeSelectedTime,
-	GlobalTimeState,
-	GlobalTimeStore,
+	IGlobalTimeStoreActions,
+	IGlobalTimeStoreState,
 	ParsedTimeRange,
 } from './types';
-import {
-	computeRounded5sMinMax,
-	isCustomTimeRange,
-	parseSelectedTime,
-} from './utils';
+import { isCustomTimeRange, parseSelectedTime } from './utils';
 
-export type GlobalTimeStoreApi = StoreApi<GlobalTimeStore>;
-export type IGlobalTimeStore = GlobalTimeStore;
+export type IGlobalTimeStore = IGlobalTimeStoreState & IGlobalTimeStoreActions;
 
-function computeIsRefreshEnabled(
-	selectedTime: GlobalTimeSelectedTime,
-	refreshInterval: number,
-): boolean {
-	if (isCustomTimeRange(selectedTime)) {
-		return false;
-	}
-	return refreshInterval > 0;
-}
+export const useGlobalTimeStore = create<IGlobalTimeStore>((set, get) => ({
+	selectedTime: DEFAULT_TIME_RANGE,
+	isRefreshEnabled: false,
+	refreshInterval: 0,
+	setSelectedTime: (selectedTime, refreshInterval): void => {
+		set((state) => {
+			const newRefreshInterval = refreshInterval ?? state.refreshInterval;
+			const isCustom = isCustomTimeRange(selectedTime);
 
-export function createGlobalTimeStore(
-	initialState?: Partial<GlobalTimeState>,
-): GlobalTimeStoreApi {
-	const selectedTime = initialState?.selectedTime ?? DEFAULT_TIME_RANGE;
-	const refreshInterval = initialState?.refreshInterval ?? 0;
-	const name = initialState?.name;
-
-	return createStore<GlobalTimeStore>((set, get) => ({
-		name,
-		selectedTime,
-		refreshInterval,
-		isRefreshEnabled: computeIsRefreshEnabled(selectedTime, refreshInterval),
-		lastRefreshTimestamp: 0,
-		lastComputedMinMax: { minTime: 0, maxTime: 0 },
-
-		setSelectedTime: (
-			time: GlobalTimeSelectedTime,
-			newRefreshInterval?: number,
-		): void => {
-			const state = get();
-			const interval = newRefreshInterval ?? state.refreshInterval;
-
-			if (time === state.selectedTime && interval === state.refreshInterval) {
-				return;
-			}
-
-			const computedMinMax = parseSelectedTime(time);
-
-			set({
-				selectedTime: time,
-				refreshInterval: interval,
-				isRefreshEnabled: computeIsRefreshEnabled(time, interval),
-				lastComputedMinMax: computedMinMax,
-				lastRefreshTimestamp: Date.now(),
-			});
-		},
-
-		setRefreshInterval: (interval: number): void => {
-			set((state) => ({
-				refreshInterval: interval,
-				isRefreshEnabled: computeIsRefreshEnabled(state.selectedTime, interval),
-			}));
-		},
-
-		getMinMaxTime: (): ParsedTimeRange => {
-			const state = get();
-
-			if (isCustomTimeRange(state.selectedTime)) {
-				return parseSelectedTime(state.selectedTime);
-			}
-
-			if (state.isRefreshEnabled) {
-				const freshMinMax = computeRounded5sMinMax(state.selectedTime);
-
-				if (
-					freshMinMax.minTime !== state.lastComputedMinMax.minTime ||
-					freshMinMax.maxTime !== state.lastComputedMinMax.maxTime
-				) {
-					set({ lastComputedMinMax: freshMinMax, lastRefreshTimestamp: Date.now() });
-				}
-
-				return freshMinMax;
-			}
-
-			return state.lastComputedMinMax;
-		},
-
-		computeAndStoreMinMax: (): ParsedTimeRange => {
-			const state = get();
-
-			if (state.isRefreshEnabled) {
-				return state.lastComputedMinMax;
-			}
-
-			const computedMinMax = parseSelectedTime(state.selectedTime);
-
-			set({
-				lastComputedMinMax: computedMinMax,
-				lastRefreshTimestamp: Date.now(),
-			});
-			return computedMinMax;
-		},
-
-		updateRefreshTimestamp: (): void => {
-			set({ lastRefreshTimestamp: Date.now() });
-		},
-
-		getAutoRefreshQueryKey: (
-			selectedTime: GlobalTimeSelectedTime,
-			...queryParts: unknown[]
-		): unknown[] => {
-			const storeName = get().name;
-			if (storeName) {
-				return [
-					REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-					storeName,
-					...queryParts,
-					selectedTime,
-				];
-			}
-			return [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, ...queryParts, selectedTime];
-		},
-	}));
-}
-
-export const defaultGlobalTimeStore = createGlobalTimeStore();
-
-export const useGlobalTimeStore = <T = GlobalTimeStore>(
-	selector?: (state: GlobalTimeStore) => T,
-): T => {
-	return useStore(
-		defaultGlobalTimeStore,
-		selector ?? ((state) => state as unknown as T),
-	);
-};
+			return {
+				selectedTime,
+				refreshInterval: newRefreshInterval,
+				isRefreshEnabled: !isCustom && newRefreshInterval > 0,
+			};
+		});
+	},
+	getMinMaxTime: (selectedTime): ParsedTimeRange => {
+		return parseSelectedTime(selectedTime || get().selectedTime);
+	},
+}));

frontend/src/store/globalTime/hooks.ts

@@ -1,57 +0,0 @@
-// oxlint-disable-next-line no-restricted-imports
-import { useContext } from 'react';
-import { useStoreWithEqualityFn } from 'zustand/traditional';
-
-import { GlobalTimeContext } from './GlobalTimeContext';
-import { defaultGlobalTimeStore, GlobalTimeStoreApi } from './globalTimeStore';
-import { GlobalTimeStore, ParsedTimeRange } from './types';
-import { isCustomTimeRange } from './utils';
-
-/**
- * Access global time state with optional selector for performance.
- *
- * @example
- * // Full state (re-renders on any change)
- * const { selectedTime, setSelectedTime } = useGlobalTime();
- *
- * @example
- * // With selector (re-renders only when selectedTime changes)
- * const selectedTime = useGlobalTime(state => state.selectedTime);
- */
-export function useGlobalTime<T = GlobalTimeStore>(
-	selector?: (state: GlobalTimeStore) => T,
-	equalityFn?: (a: T, b: T) => boolean,
-): T {
-	const contextStore = useContext(GlobalTimeContext);
-	const store = contextStore ?? defaultGlobalTimeStore;
-
-	return useStoreWithEqualityFn(
-		store,
-		selector ?? ((state) => state as unknown as T),
-		equalityFn,
-	);
-}
-
-/**
- * Check if currently using a custom time range.
- */
-export function useIsCustomTimeRange(): boolean {
-	const selectedTime = useGlobalTime((state) => state.selectedTime);
-	return isCustomTimeRange(selectedTime);
-}
-
-/**
- * Get the store API directly (for subscriptions or non-React contexts).
- */
-export function useGlobalTimeStoreApi(): GlobalTimeStoreApi {
-	const contextStore = useContext(GlobalTimeContext);
-	return contextStore ?? defaultGlobalTimeStore;
-}
-
-/**
- * Get the last computed min/max time values.
- * Use this for display purposes to ensure consistency with query data.
- */
-export function useLastComputedMinMax(): ParsedTimeRange {
-	return useGlobalTime((state) => state.lastComputedMinMax);
-}

frontend/src/store/globalTime/index.ts

@@ -1,558 +1,9 @@
-/**
- * # Global Time Store
- *
- * Centralized time management for the application with auto-refresh support.
- *
- * ## Quick Start
- *
- * ```tsx
- * import { useGlobalTime, NANO_SECOND_MULTIPLIER } from 'store/globalTime';
- *
- * function MyComponent() {
- *   const selectedTime = useGlobalTime((s) => s.selectedTime);
- *   const getMinMaxTime = useGlobalTime((s) => s.getMinMaxTime);
- *   const getAutoRefreshQueryKey = useGlobalTime((s) => s.getAutoRefreshQueryKey);
- *   const isRefreshEnabled = useGlobalTime((s) => s.isRefreshEnabled);
- *   const refreshInterval = useGlobalTime((s) => s.refreshInterval);
- *
- *   const { data } = useQuery({
- *     queryKey: getAutoRefreshQueryKey(selectedTime, 'MY_QUERY', params),
- *     queryFn: () => {
- *       const { minTime, maxTime } = getMinMaxTime();
- *       const start = Math.floor(minTime / NANO_SECOND_MULTIPLIER / 1000);
- *       const end = Math.floor(maxTime / NANO_SECOND_MULTIPLIER / 1000);
- *       return fetchData({ start, end });
- *     },
- *     refetchInterval: isRefreshEnabled ? refreshInterval : false,
- *   });
- * }
- * ```
- *
- * ## Core Concepts
- *
- * ### Time Formats
- *
- * | Format | Example | Description |
- * |--------|---------|-------------|
- * | Relative | `'15m'`, `'1h'`, `'1d'` | Duration from now, supports auto-refresh |
- * | Custom | `'1234567890||_||1234567899'` | Fixed range in nanoseconds, no auto-refresh |
- *
- * ### Time Units
- *
- * - Store values are in **nanoseconds**
- * - Most APIs expect **seconds**
- * - Convert to have seconds: `Math.floor(nanoTime / NANO_SECOND_MULTIPLIER / 1000)`
- * - Convert to have ms: `Math.floor(nanoTime / NANO_SECOND_MULTIPLIER)`
- *
- * ## Integration Guide
- *
- * ### Step 1: Get Store State
- *
- * Use selectors for optimal re-render performance:
- *
- * ```tsx
- * // Good - only re-renders when selectedTime changes
- * const selectedTime = useGlobalTime((s) => s.selectedTime);
- * const getMinMaxTime = useGlobalTime((s) => s.getMinMaxTime);
- *
- * // Avoid - re-renders on ANY store change
- * const store = useGlobalTime();
- * ```
- *
- * ### Step 2: Build Query Key
- *
- * Use the store's `getAutoRefreshQueryKey` to enable auto-refresh:
- *
- * ```tsx
- * const getAutoRefreshQueryKey = useGlobalTime((s) => s.getAutoRefreshQueryKey);
- *
- * const queryKey = useMemo(
- *   () => getAutoRefreshQueryKey(
- *     selectedTime,      // Required - triggers invalidation
- *     'UNIQUE_KEY',      // Your query identifier
- *     ...otherParams     // Additional cache-busting params
- *   ),
- *   [getAutoRefreshQueryKey, selectedTime, ...deps]
- * );
- * ```
- *
- * **Note:** For named providers (with `name` prop), query keys are automatically
- * scoped to that store, enabling isolated invalidation and refresh tracking.
- *
- * ### Step 3: Fetch Data
- *
- * **IMPORTANT**: Call `getMinMaxTime()` INSIDE `queryFn`:
- *
- * ```tsx
- * const { data } = useQuery({
- *   queryKey,
- *   queryFn: () => {
- *     // Fresh time values computed here during auto-refresh
- *     const { minTime, maxTime } = getMinMaxTime();
- *     const start = Math.floor(minTime / NANO_SECOND_MULTIPLIER / 1000);
- *     const end = Math.floor(maxTime / NANO_SECOND_MULTIPLIER / 1000);
- *     return api.fetch({ start, end });
- *   },
- *   refetchInterval: isRefreshEnabled ? refreshInterval : false,
- * });
- * ```
- *
- * ### Step 4: Add Refresh Button (Optional)
- *
- * ```tsx
- * import {
- *   useGlobalTimeQueryInvalidate,
- *   useIsGlobalTimeQueryRefreshing,
- * } from 'store/globalTime';
- *
- * function RefreshButton() {
- *   const invalidate = useGlobalTimeQueryInvalidate();
- *   const isRefreshing = useIsGlobalTimeQueryRefreshing();
- *
- *   return (
- *     <button onClick={invalidate} disabled={isRefreshing}>
- *       {isRefreshing ? 'Refreshing...' : 'Refresh'}
- *     </button>
- *   );
- * }
- * ```
- *
- * ## Avoiding Stale Data
- *
- * ### Problem: Time Drift During Refresh
- *
- * If multiple queries compute time independently, they may use different values:
- *
- * ```tsx
- * // BAD - each query gets different time
- * queryFn: () => {
- *   const now = Date.now();
- *   return fetchData({ end: now, start: now - duration });
- * }
- * ```
- *
- * ### Solution: Use getMinMaxTime()
- *
- * `getMinMaxTime()` ensures all queries use consistent timestamps:
- * - When auto-refresh is **disabled**: returns cached values from `computeAndStoreMinMax()`
- * - When auto-refresh is **enabled**: computes fresh values (rounded to 5-second boundaries)
- *
- * Since values are rounded to 5-second boundaries, all queries calling `getMinMaxTime()`
- * within the same 5-second window get identical timestamps.
- *
- * ```tsx
- * // GOOD - all queries get same time
- * queryFn: () => {
- *   const { minTime, maxTime } = getMinMaxTime();
- *   return fetchData({ start: minTime, end: maxTime });
- * }
- * ```
- *
- * ### How It Works
- *
- * **Manual refresh:**
- * 1. User clicks refresh
- * 2. `useGlobalTimeQueryInvalidate` calls `computeAndStoreMinMax()`
- * 3. Fresh min/max stored in `lastComputedMinMax`
- * 4. All queries re-run and call `getMinMaxTime()`
- * 5. All get the SAME cached values
- *
- * **Auto-refresh (when `isRefreshEnabled = true`):**
- * 1. React-query's `refetchInterval` triggers query re-execution
- * 2. `getMinMaxTime()` computes fresh values (rounded to 5 seconds)
- * 3. If values changed, updates `lastComputedMinMax` cache
- * 4. All queries within same 5-second window get consistent values
- *
- * ## Auto-Refresh Setup
- *
- * Auto-refresh is enabled when:
- * - `selectedTime` is a relative duration (e.g., `'15m'`)
- * - `refreshInterval > 0`
- *
- * ```tsx
- * // Auto-refresh configuration
- * const selectedTime = useGlobalTime((s) => s.selectedTime);
- * const getAutoRefreshQueryKey = useGlobalTime((s) => s.getAutoRefreshQueryKey);
- * const isRefreshEnabled = useGlobalTime((s) => s.isRefreshEnabled);
- * const refreshInterval = useGlobalTime((s) => s.refreshInterval);
- *
- * useQuery({
- *   queryKey: getAutoRefreshQueryKey(selectedTime, 'MY_QUERY'),
- *   queryFn: () => { ... },
- *   // Enable periodic refetch
- *   refetchInterval: isRefreshEnabled ? refreshInterval : false,
- * });
- * ```
- *
- * ## API Reference
- *
- * ### Hooks
- *
- * | Hook | Returns | Description |
- * |------|---------|-------------|
- * | `useGlobalTime(selector?)` | `T` | Access store state with optional selector |
- * | `useGlobalTimeQueryInvalidate()` | `() => Promise<void>` | Invalidate all auto-refresh queries |
- * | `useIsGlobalTimeQueryRefreshing()` | `boolean` | Check if any query is refreshing |
- * | `useIsCustomTimeRange()` | `boolean` | Check if using fixed time range |
- * | `useLastComputedMinMax()` | `ParsedTimeRange` | Get cached min/max values |
- * | `useGlobalTimeStoreApi()` | `GlobalTimeStoreApi` | Get raw store API |
- *
- * ### Store Actions
- *
- * | Action | Description |
- * |--------|-------------|
- * | `setSelectedTime(time, interval?)` | Set time range and optional refresh interval (resets cache) |
- * | `setRefreshInterval(ms)` | Set auto-refresh interval |
- * | `getMinMaxTime(time?)` | Get min/max (fresh if auto-refresh enabled, cached otherwise) |
- * | `computeAndStoreMinMax()` | Compute fresh values and cache them |
- * | `getAutoRefreshQueryKey(time, ...parts)` | Build scoped query key for this store instance |
- *
- * ### Utilities
- *
- * | Function | Description |
- * |----------|-------------|
- * | `getAutoRefreshQueryKey(time, ...parts)` | **@deprecated** Use store action instead |
- * | `parseSelectedTime(time)` | Parse time string to min/max (fresh computation) |
- * | `isCustomTimeRange(time)` | Check if time is custom range format |
- * | `createCustomTimeRange(min, max)` | Create custom range string |
- *
- * ### Constants
- *
- * | Constant | Value | Description |
- * |----------|-------|-------------|
- * | `NANO_SECOND_MULTIPLIER` | `1000000` | Convert ms to ns |
- * | `CUSTOM_TIME_SEPARATOR` | `'||_||'` | Separator in custom range strings |
- *
- * ## Context & Composition
- *
- * ### Why Use Context?
- *
- * By default, `useGlobalTime()` uses a shared global store. Use `GlobalTimeProvider`
- * to create isolated time state for specific UI sections (modals, drawers, etc.).
- *
- * ### Provider Options
- *
- * | Option | Type | Description |
- * |--------|------|-------------|
- * | `name` | `string` | Scope query keys to this store (enables isolated invalidation) |
- * | `inheritGlobalTime` | `boolean` | Initialize with parent/global time value |
- * | `initialTime` | `string` | Initial time if not inheriting |
- * | `enableUrlParams` | `boolean \| object` | Sync time to URL query params |
- * | `removeQueryParamsOnUnmount` | `boolean` | Clean URL params on unmount |
- * | `localStoragePersistKey` | `string` | Persist time to localStorage |
- * | `refreshInterval` | `number` | Initial auto-refresh interval (ms) |
- *
- * ### Example 1: Isolated Time in Modal
- *
- * A modal with its own time picker that doesn't affect the main page:
- *
- * ```tsx
- * import { GlobalTimeProvider, useGlobalTime } from 'store/globalTime';
- *
- * function EntityDetailsModal({ entity, onClose }) {
- *   return (
- *     <Modal open onClose={onClose}>
- *       // Isolated time context - changes here don't affect parent
- *       <GlobalTimeProvider
- *         inheritGlobalTime  // Start with parent's current time
- *         refreshInterval={0} // No auto-refresh in modal
- *       >
- *         <ModalContent entity={entity} />
- *       </GlobalTimeProvider>
- *     </Modal>
- *   );
- * }
- *
- * function ModalContent({ entity }) {
- *   // This useGlobalTime reads from the modal's isolated store
- *   const selectedTime = useGlobalTime((s) => s.selectedTime);
- *   const setSelectedTime = useGlobalTime((s) => s.setSelectedTime);
- *
- *   return (
- *     <>
- *       <DateTimePicker
- *         value={selectedTime}
- *         onChange={(time) => setSelectedTime(time)}
- *       />
- *       <EntityMetrics entity={entity} />
- *       <EntityLogs entity={entity} />
- *     </>
- *   );
- * }
- * ```
- *
- * ### Example 2: List Page with Detail Drawer
- *
- * Main list uses global time, drawer has independent time:
- *
- * ```tsx
- * // Main list page - uses global time (no provider needed)
- * function K8sPodsList() {
- *   const selectedTime = useGlobalTime((s) => s.selectedTime);
- *   const [selectedPod, setSelectedPod] = useState(null);
- *
- *   return (
- *     <>
- *       <PageHeader>
- *         <DateTimeSelectionV3 /> // Controls global time
- *       </PageHeader>
- *
- *       <PodsTable
- *         timeRange={selectedTime}
- *         onRowClick={setSelectedPod}
- *       />
- *
- *       {selectedPod && (
- *         <PodDetailsDrawer
- *           pod={selectedPod}
- *           onClose={() => setSelectedPod(null)}
- *         />
- *       )}
- *     </>
- *   );
- * }
- *
- * // Drawer with its own time context
- * function PodDetailsDrawer({ pod, onClose }) {
- *   return (
- *     <Drawer open onClose={onClose}>
- *       <GlobalTimeProvider
- *         name="pod-drawer"          // Scopes queries - only this drawer's queries are invalidated
- *         inheritGlobalTime          // Start with list's time
- *         removeQueryParamsOnUnmount // Clean up URL when drawer closes
- *         enableUrlParams={{
- *           relativeTimeKey: 'drawerTime',
- *           startTimeKey: 'drawerStart',
- *           endTimeKey: 'drawerEnd',
- *         }}
- *       >
- *         <DrawerHeader>
- *           <DateTimeSelectionV3 /> // Controls drawer's time only
- *         </DrawerHeader>
- *
- *         <Tabs>
- *           <Tab label="Metrics"><PodMetrics pod={pod} /></Tab>
- *           <Tab label="Logs"><PodLogs pod={pod} /></Tab>
- *           <Tab label="Events"><PodEvents pod={pod} /></Tab>
- *         </Tabs>
- *       </GlobalTimeProvider>
- *     </Drawer>
- *   );
- * }
- * ```
- *
- * ### Example 3: Nested Contexts
- *
- * Contexts can be nested - each level creates isolation:
- *
- * ```tsx
- * // App level - global time
- * function App() {
- *   return (
- *     <QueryClientProvider>
- *       // No provider here = uses defaultGlobalTimeStore
- *       <Dashboard />
- *     </QueryClientProvider>
- *   );
- * }
- *
- * // Dashboard with comparison panel
- * function Dashboard() {
- *   return (
- *     <div className="dashboard">
- *       // Main dashboard uses global time
- *       <MainCharts />
- *
- *       // Comparison panel has its own time
- *       <GlobalTimeProvider initialTime="1h">
- *         <ComparisonPanel />
- *       </GlobalTimeProvider>
- *     </div>
- *   );
- * }
- *
- * function ComparisonPanel() {
- *   // This reads from ComparisonPanel's isolated store (1h)
- *   // Not affected by global time changes
- *   const selectedTime = useGlobalTime((s) => s.selectedTime);
- *   return <ComparisonCharts timeRange={selectedTime} />;
- * }
- * ```
- *
- * ### Example 4: URL Sync for Shareable Links
- *
- * Persist time selection to URL for shareable links:
- *
- * ```tsx
- * function TracesExplorer() {
- *   return (
- *     <GlobalTimeProvider
- *       enableUrlParams={{
- *         relativeTimeKey: 'time',      // ?time=15m
- *         startTimeKey: 'startTime',    // ?startTime=1234567890
- *         endTimeKey: 'endTime',        // ?endTime=1234567899
- *       }}
- *       initialTime="15m"  // Fallback if URL has no time params
- *     >
- *       <TracesContent />
- *     </GlobalTimeProvider>
- *   );
- * }
- * ```
- *
- * ### Example 5: localStorage Persistence
- *
- * Remember user's last selected time across sessions:
- *
- * ```tsx
- * function MetricsExplorer() {
- *   return (
- *     <GlobalTimeProvider
- *       localStoragePersistKey="metrics-explorer-time"
- *       initialTime="1h"  // Fallback for first visit
- *     >
- *       <MetricsContent />
- *     </GlobalTimeProvider>
- *   );
- * }
- * ```
- *
- * ### Context Resolution Order
- *
- * When `useGlobalTime()` is called, it resolves the store in this order:
- *
- * 1. Nearest `GlobalTimeProvider` ancestor (if any)
- * 2. `defaultGlobalTimeStore` (global singleton)
- *
- * ```
- * App (no provider -> uses defaultGlobalTimeStore)
- * |-- Dashboard
- *     |-- MainCharts (uses defaultGlobalTimeStore)
- *     |-- GlobalTimeProvider (isolated store A)
- *         |-- ComparisonPanel (uses store A)
- *             |-- GlobalTimeProvider (isolated store B)
- *                 |-- NestedChart (uses store B)
- * ```
- *
- * ### Scoped Query Keys with `name`
- *
- * The `name` prop enables isolated query invalidation. When a provider has a name,
- * its queries are prefixed with that name, so invalidation only affects that store:
- *
- * ```tsx
- * // Main page - unnamed store
- * // Query keys: ['AUTO_REFRESH_QUERY', 'METRICS', ...]
- * function MainDashboard() {
- *   const getAutoRefreshQueryKey = useGlobalTime((s) => s.getAutoRefreshQueryKey);
- *   // ...
- * }
- *
- * // Drawer - named store
- * // Query keys: ['AUTO_REFRESH_QUERY', 'drawer', 'METRICS', ...]
- * function DetailDrawer() {
- *   return (
- *     <GlobalTimeProvider name="drawer" inheritGlobalTime>
- *       <DrawerContent />
- *     </GlobalTimeProvider>
- *   );
- * }
- *
- * function DrawerContent() {
- *   const getAutoRefreshQueryKey = useGlobalTime((s) => s.getAutoRefreshQueryKey);
- *   const invalidate = useGlobalTimeQueryInvalidate();
- *   // invalidate() only refreshes queries with 'drawer' prefix
- * }
- * ```
- *
- * ## Complete Example
- *
- * ```tsx
- * import { useMemo } from 'react';
- * import { useQuery } from 'react-query';
- * import { useGlobalTime, NANO_SECOND_MULTIPLIER } from 'store/globalTime';
- *
- * function MetricsPanel({ entityId }: { entityId: string }) {
- *   // 1. Get store state with selectors
- *   const selectedTime = useGlobalTime((s) => s.selectedTime);
- *   const getMinMaxTime = useGlobalTime((s) => s.getMinMaxTime);
- *   const getAutoRefreshQueryKey = useGlobalTime((s) => s.getAutoRefreshQueryKey);
- *   const isRefreshEnabled = useGlobalTime((s) => s.isRefreshEnabled);
- *   const refreshInterval = useGlobalTime((s) => s.refreshInterval);
- *
- *   // 2. Build query key (memoized) - automatically scoped if using named provider
- *   const queryKey = useMemo(
- *     () => getAutoRefreshQueryKey(selectedTime, 'METRICS', entityId),
- *     [getAutoRefreshQueryKey, selectedTime, entityId]
- *   );
- *
- *   // 3. Query with auto-refresh
- *   const { data, isLoading } = useQuery({
- *     queryKey,
- *     queryFn: () => {
- *       // Get fresh time inside queryFn
- *       const { minTime, maxTime } = getMinMaxTime();
- *       const start = Math.floor(minTime / NANO_SECOND_MULTIPLIER / 1000);
- *       const end = Math.floor(maxTime / NANO_SECOND_MULTIPLIER / 1000);
- *
- *       return fetchMetrics({ entityId, start, end });
- *     },
- *     refetchInterval: isRefreshEnabled ? refreshInterval : false,
- *   });
- *
- *   return <Chart data={data} loading={isLoading} />;
- * }
- * ```
- *
- * @module store/globalTime
- */
-
-// Store
-export {
-	createGlobalTimeStore,
-	defaultGlobalTimeStore,
-	useGlobalTimeStore,
-} from './globalTimeStore';
-export type { GlobalTimeStoreApi } from './globalTimeStore';
-
-// Context & Provider
-export { GlobalTimeContext, GlobalTimeProvider } from './GlobalTimeContext';
-
-// Hooks
-export {
-	useGlobalTime,
-	useGlobalTimeStoreApi,
-	useIsCustomTimeRange,
-	useLastComputedMinMax,
-} from './hooks';
-
-// Query hooks for auto-refresh
-export { useGlobalTimeQueryInvalidate } from './useGlobalTimeQueryInvalidate';
-export { useIsGlobalTimeQueryRefreshing } from './useIsGlobalTimeQueryRefreshing';
-
-// Types
-export type {
-	CustomTimeRange,
-	CustomTimeRangeSeparator,
-	GlobalTimeActions,
-	GlobalTimeProviderOptions,
-	GlobalTimeSelectedTime,
-	GlobalTimeState,
-	GlobalTimeStore,
-	IGlobalTimeStoreActions,
-	IGlobalTimeStoreState,
-	ParsedTimeRange,
-} from './types';
-
-// Utilities
+export { useGlobalTimeStore } from './globalTimeStore';
+export type { IGlobalTimeStoreState, ParsedTimeRange } from './types';
 export {
 	createCustomTimeRange,
 	CUSTOM_TIME_SEPARATOR,
-	getAutoRefreshQueryKey,
 	isCustomTimeRange,
-	NANO_SECOND_MULTIPLIER,
 	parseCustomTimeRange,
 	parseSelectedTime,
 } from './utils';
-
-// Internal hooks (for advanced use cases)
-export { useQueryCacheSync } from './useQueryCacheSync';

frontend/src/store/globalTime/types.ts

@@ -44,80 +44,9 @@ export interface IGlobalTimeStoreActions {
 	) => void;
 
 	/**
-	 * Get the current min/max time values.
-	 * - Custom time ranges: returns exact parsed values
-	 * - isRefreshEnabled true: computes 5s-rounded values and updates store
-	 * - isRefreshEnabled false: returns lastComputedMinMax
+	 * Get the current min/max time values parsed from selectedTime.
+	 * For durations, computes fresh values based on Date.now().
+	 * For custom ranges, extracts the stored values.
 	 */
-	getMinMaxTime: () => ParsedTimeRange;
+	getMinMaxTime: (selectedItem?: GlobalTimeSelectedTime) => ParsedTimeRange;
 }
-
-export interface GlobalTimeProviderOptions {
-	/**
-	 * Optional name for the store instance.
-	 * Used to scope query keys - only queries with this store's prefix
-	 * will be tracked/invalidated by this store's hooks.
-	 */
-	name?: string;
-	/** Initialize from parent/global time */
-	inheritGlobalTime?: boolean;
-	/** Initial time if not inheriting */
-	initialTime?: GlobalTimeSelectedTime;
-	/** URL sync configuration. When false/omitted, no URL sync. */
-	enableUrlParams?:
-		| boolean
-		| {
-				relativeTimeKey?: string;
-				startTimeKey?: string;
-				endTimeKey?: string;
-		  };
-	removeQueryParamsOnUnmount?: boolean;
-	localStoragePersistKey?: string;
-	refreshInterval?: number;
-}
-
-export interface GlobalTimeState {
-	/**
-	 * Optional name for the store instance.
-	 * Used to scope query keys for auto-refresh queries.
-	 * Unnamed stores use the default prefix without a name.
-	 */
-	name?: string;
-	selectedTime: GlobalTimeSelectedTime;
-	refreshInterval: number;
-	isRefreshEnabled: boolean;
-	lastRefreshTimestamp: number;
-	lastComputedMinMax: ParsedTimeRange;
-}
-
-export interface GlobalTimeActions {
-	setSelectedTime: (
-		time: GlobalTimeSelectedTime,
-		refreshInterval?: number,
-	) => void;
-	setRefreshInterval: (interval: number) => void;
-	getMinMaxTime: () => ParsedTimeRange;
-	/**
-	 * Compute fresh rounded min/max values, store them, and update refresh timestamp.
-	 * Call this before invalidating queries to ensure all queries use the same time values.
-	 *
-	 * @returns The newly computed ParsedTimeRange
-	 */
-	computeAndStoreMinMax: () => ParsedTimeRange;
-	/**
-	 * Update the refresh timestamp to current time.
-	 * Called by QueryCache listener when auto-refresh queries complete.
-	 */
-	updateRefreshTimestamp: () => void;
-	/**
-	 * Build query key for auto-refresh queries scoped to this store.
-	 * Named stores: ['AUTO_REFRESH_QUERY', name, ...parts, selectedTime]
-	 * Unnamed stores: ['AUTO_REFRESH_QUERY', ...parts, selectedTime]
-	 */
-	getAutoRefreshQueryKey: (
-		selectedTime: GlobalTimeSelectedTime,
-		...queryParts: unknown[]
-	) => unknown[];
-}
-
-export type GlobalTimeStore = GlobalTimeState & GlobalTimeActions;

frontend/src/store/globalTime/useComputedMinMaxSync.ts

@@ -1,18 +0,0 @@
-import { useEffect } from 'react';
-
-import { GlobalTimeStoreApi } from './globalTimeStore';
-
-/**
- * Used to initialize computed min/max on mount when store has no values yet.
- * setSelectedTime now computes min/max on change, so subscription is no longer needed.
- *
- * @internal
- */
-export function useComputedMinMaxSync(store: GlobalTimeStoreApi): void {
-	useEffect(() => {
-		const { lastComputedMinMax } = store.getState();
-		if (lastComputedMinMax.minTime === 0 && lastComputedMinMax.maxTime === 0) {
-			store.getState().computeAndStoreMinMax();
-		}
-	}, [store]);
-}

frontend/src/store/globalTime/useGlobalTimeQueryInvalidate.ts

@@ -1,36 +0,0 @@
-import { useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useGlobalTime } from './hooks';
-
-/**
- * Use when you want to invalidate any query tracked by {@link REACT_QUERY_KEY.AUTO_REFRESH_QUERY}
- *
- * This hook computes fresh time values before invalidating queries,
- * ensuring all queries use the same min/max time during a refresh cycle.
- *
- * For named stores, only invalidates queries matching the store's name.
- * For unnamed stores, invalidates all AUTO_REFRESH_QUERY queries.
- *
- * @public
- */
-export function useGlobalTimeQueryInvalidate(): () => Promise<void> {
-	const queryClient = useQueryClient();
-	const computeAndStoreMinMax = useGlobalTime((s) => s.computeAndStoreMinMax);
-	const name = useGlobalTime((s) => s.name);
-
-	return useCallback(async () => {
-		// Compute fresh time values BEFORE invalidating
-		// This ensures all queries that re-run will use the same time values
-		// If refresh is enabled, this will just be skipped
-		computeAndStoreMinMax();
-
-		// Build scoped query key prefix
-		const queryKey = name
-			? [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, name]
-			: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY];
-
-		return await queryClient.invalidateQueries({ queryKey });
-	}, [queryClient, computeAndStoreMinMax, name]);
-}

frontend/src/store/globalTime/useIsGlobalTimeQueryRefreshing.ts

@@ -1,21 +0,0 @@
-import { useIsFetching } from 'react-query';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useGlobalTime } from './hooks';
-
-/**
- * Use when you want to know if any query tracked by {@link REACT_QUERY_KEY.AUTO_REFRESH_QUERY} is refreshing
- *
- * For named stores, only checks queries matching the store's name.
- * For unnamed stores, checks all AUTO_REFRESH_QUERY queries.
- *
- * @public
- */
-export function useIsGlobalTimeQueryRefreshing(): boolean {
-	const name = useGlobalTime((s) => s.name);
-
-	const queryKey = name
-		? [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, name]
-		: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY];
-
-	return useIsFetching({ queryKey }) > 0;
-}

frontend/src/store/globalTime/usePersistence.ts

@@ -1,32 +0,0 @@
-import { useEffect } from 'react';
-
-import set from 'api/browser/localstorage/set';
-
-import { GlobalTimeStoreApi } from './globalTimeStore';
-
-/**
- * Used to keep the selected time persisted on localStorage
- *
- * @internal
- */
-export function usePersistence(
-	store: GlobalTimeStoreApi,
-	persistKey: string | undefined,
-): void {
-	useEffect(() => {
-		if (!persistKey) {
-			return;
-		}
-
-		let previousSelectedTime = store.getState().selectedTime;
-
-		return store.subscribe((state) => {
-			if (state.selectedTime === previousSelectedTime) {
-				return;
-			}
-			previousSelectedTime = state.selectedTime;
-
-			set(persistKey, state.selectedTime);
-		});
-	}, [store, persistKey]);
-}

frontend/src/store/globalTime/useQueryCacheSync.ts

@@ -1,51 +0,0 @@
-import { useEffect } from 'react';
-import { useQueryClient } from 'react-query';
-
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-
-import { GlobalTimeStoreApi } from './globalTimeStore';
-
-/**
- * Used to keep lastRefreshTimestamp in sync after every react query refresh.
- * For named stores, only tracks queries with matching store name.
- * For unnamed stores, tracks all AUTO_REFRESH_QUERY queries (backward compatible).
- *
- * @internal
- */
-export function useQueryCacheSync(store: GlobalTimeStoreApi): void {
-	const queryClient = useQueryClient();
-
-	useEffect(() => {
-		const queryCache = queryClient.getQueryCache();
-		const storeName = store.getState().name;
-
-		return queryCache.subscribe((event) => {
-			if (event?.type !== 'queryUpdated') {
-				return;
-			}
-
-			const action = event.action as { type?: string };
-			if (action?.type !== 'success') {
-				return;
-			}
-
-			const queryKey = event.query.queryKey;
-			if (!Array.isArray(queryKey)) {
-				return;
-			}
-
-			// this is created by getAutoRefreshQueryKey inside the store,
-			// to track usages of global time store and autoRefresh
-			if (queryKey[0] !== REACT_QUERY_KEY.AUTO_REFRESH_QUERY) {
-				return;
-			}
-
-			// Named store: only track queries with matching name at position [1]
-			if (storeName && queryKey[1] !== storeName) {
-				return;
-			}
-			// Unnamed store: track all AUTO_REFRESH_QUERY queries (backward compatible)
-			store.getState().updateRefreshTimestamp();
-		});
-	}, [queryClient, store]);
-}

frontend/src/store/globalTime/useUrlSync.ts

@@ -1,145 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs';
-import { Time } from 'container/TopNav/DateTimeSelectionV2/types';
-import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
-
-import { GlobalTimeStoreApi } from './globalTimeStore';
-import { GlobalTimeProviderOptions } from './types';
-import {
-	createCustomTimeRange,
-	isCustomTimeRange,
-	NANO_SECOND_MULTIPLIER,
-	parseCustomTimeRange,
-} from './utils';
-
-interface UrlSyncConfig {
-	relativeTimeKey: string;
-	startTimeKey: string;
-	endTimeKey: string;
-}
-
-/**
- * Used to sync internal state with URL when URL params are enabled.
- *
- * @internal
- */
-export function useUrlSync(
-	store: GlobalTimeStoreApi,
-	enableUrlParams: GlobalTimeProviderOptions['enableUrlParams'],
-	removeOnUnmount: boolean,
-): void {
-	const isInitialMount = useRef(true);
-
-	const keys: UrlSyncConfig =
-		enableUrlParams && typeof enableUrlParams === 'object'
-			? {
-					relativeTimeKey: enableUrlParams.relativeTimeKey ?? 'relativeTime',
-					startTimeKey: enableUrlParams.startTimeKey ?? 'startTime',
-					endTimeKey: enableUrlParams.endTimeKey ?? 'endTime',
-				}
-			: {
-					relativeTimeKey: 'relativeTime',
-					startTimeKey: 'startTime',
-					endTimeKey: 'endTime',
-				};
-
-	const [urlState, setUrlState] = useQueryStates(
-		{
-			[keys.relativeTimeKey]: parseAsString,
-			[keys.startTimeKey]: parseAsInteger,
-			[keys.endTimeKey]: parseAsInteger,
-		},
-		{ history: 'replace' },
-	);
-
-	useEffect(() => {
-		if (!enableUrlParams || !isInitialMount.current) {
-			return;
-		}
-		isInitialMount.current = false;
-
-		const relativeTime = urlState[keys.relativeTimeKey];
-		const startTime = urlState[keys.startTimeKey];
-		const endTime = urlState[keys.endTimeKey];
-
-		if (typeof startTime === 'number' && typeof endTime === 'number') {
-			const customTime = createCustomTimeRange(
-				startTime * NANO_SECOND_MULTIPLIER,
-				endTime * NANO_SECOND_MULTIPLIER,
-			);
-			store.getState().setSelectedTime(customTime);
-		} else if (
-			typeof relativeTime === 'string' &&
-			isValidShortHandDateTimeFormat(relativeTime)
-		) {
-			store.getState().setSelectedTime(relativeTime as Time);
-		}
-	}, [
-		urlState,
-		keys?.startTimeKey,
-		keys?.endTimeKey,
-		keys?.relativeTimeKey,
-		store,
-		enableUrlParams,
-	]);
-
-	useEffect(() => {
-		if (!enableUrlParams) {
-			return;
-		}
-
-		let previousSelectedTime = store.getState().selectedTime;
-
-		return store.subscribe((state) => {
-			if (state.selectedTime === previousSelectedTime) {
-				return;
-			}
-			previousSelectedTime = state.selectedTime;
-
-			if (isCustomTimeRange(state.selectedTime)) {
-				const parsed = parseCustomTimeRange(state.selectedTime);
-				if (parsed) {
-					void setUrlState({
-						[keys.relativeTimeKey]: null,
-						[keys.startTimeKey]: Math.floor(parsed.minTime / NANO_SECOND_MULTIPLIER),
-						[keys.endTimeKey]: Math.floor(parsed.maxTime / NANO_SECOND_MULTIPLIER),
-					});
-				}
-			} else {
-				void setUrlState({
-					[keys.relativeTimeKey]: state.selectedTime,
-					[keys.startTimeKey]: null,
-					[keys.endTimeKey]: null,
-				});
-			}
-		});
-	}, [
-		store,
-		keys?.startTimeKey,
-		keys?.endTimeKey,
-		keys?.relativeTimeKey,
-		setUrlState,
-		enableUrlParams,
-	]);
-
-	useEffect(() => {
-		if (!enableUrlParams || !removeOnUnmount) {
-			return;
-		}
-
-		return (): void => {
-			void setUrlState({
-				[keys.relativeTimeKey]: null,
-				[keys.startTimeKey]: null,
-				[keys.endTimeKey]: null,
-			});
-		};
-	}, [
-		removeOnUnmount,
-		keys?.relativeTimeKey,
-		keys?.startTimeKey,
-		keys?.endTimeKey,
-		setUrlState,
-		enableUrlParams,
-	]);
-}

frontend/src/store/globalTime/utils.ts

@@ -44,8 +44,8 @@ export function parseCustomTimeRange(
 	}
 
 	const [minStr, maxStr] = selectedTime.split(CUSTOM_TIME_SEPARATOR);
-	const minTime = Number.parseInt(minStr, 10);
-	const maxTime = Number.parseInt(maxStr, 10);
+	const minTime = parseInt(minStr, 10);
+	const maxTime = parseInt(maxStr, 10);
 
 	if (Number.isNaN(minTime) || Number.isNaN(maxTime)) {
 		return null;
@@ -79,60 +79,11 @@ export function parseSelectedTime(selectedTime: string): ParsedTimeRange {
 }
 
 /**
- * @deprecated Use store.getAutoRefreshQueryKey() instead.
- * Access via: const getAutoRefreshQueryKey = useGlobalTime((s) => s.getAutoRefreshQueryKey);
- *
- * This function only works with the default (unnamed) store prefix.
- * For named stores, use the store method to get properly scoped query keys.
+ * Use to build your react-query key for auto-refresh queries
  */
 export function getAutoRefreshQueryKey(
 	selectedTime: GlobalTimeSelectedTime,
 	...queryParts: unknown[]
 ): unknown[] {
-	if (process.env.NODE_ENV === 'development') {
-		console.warn(
-			'[globalTime] getAutoRefreshQueryKey from utils is deprecated. ' +
-				'Use useGlobalTime((s) => s.getAutoRefreshQueryKey) instead.',
-		);
-	}
 	return [REACT_QUERY_KEY.AUTO_REFRESH_QUERY, ...queryParts, selectedTime];
 }
-
-/**
- * Round timestamp down to the nearest 5-second boundary.
- * Used for tighter sync during auto-refresh scenarios.
- *
- * @param timestampNano - Timestamp in nanoseconds
- * @returns Timestamp rounded down to 5-second boundary in nanoseconds
- */
-export function roundDownTo5Seconds(timestampNano: number): number {
-	const msPerInterval = 5 * 1000;
-	const timestampMs = Math.floor(timestampNano / NANO_SECOND_MULTIPLIER);
-	const roundedMs = Math.floor(timestampMs / msPerInterval) * msPerInterval;
-	return roundedMs * NANO_SECOND_MULTIPLIER;
-}
-
-/**
- * Compute min/max time with maxTime rounded down to 5-second boundary.
- * Used when isRefreshEnabled is true for tighter time sync.
- *
- * @param selectedTime - The selected time (relative like '15m' or custom range)
- * @returns ParsedTimeRange with 5-second rounded maxTime for relative times
- */
-export function computeRounded5sMinMax(selectedTime: string): ParsedTimeRange {
-	if (isCustomTimeRange(selectedTime)) {
-		return parseSelectedTime(selectedTime);
-	}
-
-	const nowNano = Date.now() * NANO_SECOND_MULTIPLIER;
-	const roundedMaxTime = roundDownTo5Seconds(nowNano);
-
-	const { minTime: originalMin, maxTime: originalMax } =
-		getMinMaxForSelectedTime(selectedTime as Time, 0, 0);
-	const durationNano = originalMax - originalMin;
-
-	return {
-		minTime: roundedMaxTime - durationNano,
-		maxTime: roundedMaxTime,
-	};
-}

frontend/yarn.lock

@@ -19194,11 +19194,6 @@ use-sidecar@^1.1.3:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-use-sync-external-store@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"
-  integrity sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==
-
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"

pkg/types/dashboardtypes/dashboard_v2.go

@@ -1,262 +0,0 @@
-package dashboardtypes
-
-import (
-	"bytes"
-	"encoding/json"
-	"fmt"
-	"slices"
-	"strings"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/go-playground/validator/v10"
-	v1 "github.com/perses/perses/pkg/model/api/v1"
-	"github.com/perses/perses/pkg/model/api/v1/common"
-	"github.com/perses/perses/pkg/model/api/v1/dashboard"
-)
-
-// StorableDashboardDataV2 wraps v1.DashboardSpec (Perses) with additional SigNoz-specific fields.
-//
-// We embed DashboardSpec (not v1.Dashboard) to avoid carrying Perses's Metadata
-// (Name, Project, CreatedAt, UpdatedAt, Tags, Version) and Kind field. SigNoz
-// manages identity (ID), timestamps (TimeAuditable), and multi-tenancy (OrgID)
-// separately on StorableDashboardV2/DashboardV2.
-//
-// The following v1 request fields map to locations inside v1.DashboardSpec:
-//   - title       → Display.Name          (common.Display)
-//   - description → Display.Description   (common.Display)
-//
-// Fields that have no Perses equivalent will be added in this wrapper (like image, uploadGrafana, etc.)
-type StorableDashboardDataV2 = v1.DashboardSpec
-
-// UnmarshalAndValidateDashboardV2JSON unmarshals the JSON into a StorableDashboardDataV2
-// (= PostableDashboardV2 = UpdatableDashboardV2) and validates plugin kinds and specs.
-func UnmarshalAndValidateDashboardV2JSON(data []byte) (*StorableDashboardDataV2, error) {
-	var d StorableDashboardDataV2
-	// Note: DashboardSpec has a custom UnmarshalJSON which prevents
-	// DisallowUnknownFields from working at the top level. Unknown
-	// fields in plugin specs are still rejected by validateAndNormalizePluginSpec.
-	if err := json.Unmarshal(data, &d); err != nil {
-		return nil, err
-	}
-	if err := validateDashboardV2(d); err != nil {
-		return nil, err
-	}
-	return &d, nil
-}
-
-// Plugin kind → spec type factory. Each value is a pointer to the zero value of the
-// expected spec struct. validatePluginSpec marshals plugin.Spec back to JSON and
-// unmarshals into the typed struct to catch field-level errors.
-var (
-	panelPluginSpecs = map[PanelPluginKind]func() any{
-		PanelKindTimeSeries: func() any { return new(TimeSeriesPanelSpec) },
-		PanelKindBarChart:   func() any { return new(BarChartPanelSpec) },
-		PanelKindNumber:     func() any { return new(NumberPanelSpec) },
-		PanelKindPieChart:   func() any { return new(PieChartPanelSpec) },
-		PanelKindTable:      func() any { return new(TablePanelSpec) },
-		PanelKindHistogram:  func() any { return new(HistogramPanelSpec) },
-		PanelKindList:       func() any { return new(ListPanelSpec) },
-	}
-	queryPluginSpecs = map[QueryPluginKind]func() any{
-		QueryKindBuilder:       func() any { return new(BuilderQuerySpec) },
-		QueryKindComposite:     func() any { return new(CompositeQuerySpec) },
-		QueryKindFormula:       func() any { return new(FormulaSpec) },
-		QueryKindPromQL:        func() any { return new(PromQLQuerySpec) },
-		QueryKindClickHouseSQL: func() any { return new(ClickHouseSQLQuerySpec) },
-		QueryKindTraceOperator: func() any { return new(TraceOperatorSpec) },
-	}
-	variablePluginSpecs = map[VariablePluginKind]func() any{
-		VariableKindDynamic: func() any { return new(DynamicVariableSpec) },
-		VariableKindQuery:   func() any { return new(QueryVariableSpec) },
-		VariableKindCustom:  func() any { return new(CustomVariableSpec) },
-		VariableKindTextbox: func() any { return new(TextboxVariableSpec) },
-	}
-	datasourcePluginSpecs = map[DatasourcePluginKind]func() any{
-		DatasourceKindSigNoz: func() any { return new(struct{}) },
-	}
-
-	// allowedQueryKinds maps each panel plugin kind to the query plugin
-	// kinds it supports. Composite sub-query types are mapped to these
-	// same kind strings via compositeSubQueryTypeToPluginKind.
-	allowedQueryKinds = map[PanelPluginKind][]QueryPluginKind{
-		PanelKindTimeSeries: {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindBarChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindNumber:     {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindHistogram:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
-		PanelKindPieChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
-		PanelKindTable:      {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
-		PanelKindList:       {QueryKindBuilder},
-	}
-
-	// compositeSubQueryTypeToPluginKind maps CompositeQuery sub-query type
-	// strings to the equivalent top-level query plugin kind for validation.
-	compositeSubQueryTypeToPluginKind = map[qb.QueryType]QueryPluginKind{
-		qb.QueryTypeBuilder:       QueryKindBuilder,
-		qb.QueryTypeFormula:       QueryKindFormula,
-		qb.QueryTypeTraceOperator: QueryKindTraceOperator,
-		qb.QueryTypePromQL:        QueryKindPromQL,
-		qb.QueryTypeClickHouseSQL: QueryKindClickHouseSQL,
-	}
-)
-
-func validateDashboardV2(d StorableDashboardDataV2) error {
-	for name, ds := range d.Datasources {
-		if err := validateDatasourcePlugin(&ds.Plugin, fmt.Sprintf("spec.datasources.%s.plugin", name)); err != nil {
-			return err
-		}
-	}
-
-	for i, v := range d.Variables {
-		if err := validateVariablePlugin(v, fmt.Sprintf("spec.variables[%d]", i)); err != nil {
-			return err
-		}
-	}
-
-	for key, panel := range d.Panels {
-		if panel == nil {
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.panels.%s: panel must not be null", key)
-		}
-		path := fmt.Sprintf("spec.panels.%s", key)
-		if err := validatePanelPlugin(&panel.Spec.Plugin, path+".spec.plugin"); err != nil {
-			return err
-		}
-		panelKind := PanelPluginKind(panel.Spec.Plugin.Kind)
-		allowed := allowedQueryKinds[panelKind]
-		for qi := range panel.Spec.Queries {
-			queryPath := fmt.Sprintf("%s.spec.queries[%d].spec.plugin", path, qi)
-			if err := validateQueryPlugin(&panel.Spec.Queries[qi].Spec.Plugin, queryPath); err != nil {
-				return err
-			}
-			if err := validateQueryAllowedForPanel(panel.Spec.Queries[qi].Spec.Plugin, allowed, panelKind, queryPath); err != nil {
-				return err
-			}
-		}
-	}
-
-	return nil
-}
-
-func validateDatasourcePlugin(plugin *common.Plugin, path string) error {
-	kind := DatasourcePluginKind(plugin.Kind)
-	factory, ok := datasourcePluginSpecs[kind]
-	if !ok {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
-			"%s: unknown datasource plugin kind %q; allowed values: %s", path, kind, formatEnum(kind.Enum()))
-	}
-	return validateAndNormalizePluginSpec(plugin, factory, path)
-}
-
-func validateVariablePlugin(v dashboard.Variable, path string) error {
-	switch spec := v.Spec.(type) {
-	case *dashboard.ListVariableSpec:
-		pluginPath := path + ".spec.plugin"
-		kind := VariablePluginKind(spec.Plugin.Kind)
-		factory, ok := variablePluginSpecs[kind]
-		if !ok {
-			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
-				"%s: unknown variable plugin kind %q; allowed values: %s", pluginPath, kind, formatEnum(kind.Enum()))
-		}
-		return validateAndNormalizePluginSpec(&spec.Plugin, factory, pluginPath)
-	case *dashboard.TextVariableSpec:
-		// TextVariables have no plugin, nothing to validate.
-		return nil
-	default:
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: unsupported variable kind %q", path, v.Kind)
-	}
-}
-
-func validatePanelPlugin(plugin *common.Plugin, path string) error {
-	kind := PanelPluginKind(plugin.Kind)
-	factory, ok := panelPluginSpecs[kind]
-	if !ok {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
-			"%s: unknown panel plugin kind %q; allowed values: %s", path, kind, formatEnum(kind.Enum()))
-	}
-	return validateAndNormalizePluginSpec(plugin, factory, path)
-}
-
-func validateQueryPlugin(plugin *common.Plugin, path string) error {
-	kind := QueryPluginKind(plugin.Kind)
-	factory, ok := queryPluginSpecs[kind]
-	if !ok {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
-			"%s: unknown query plugin kind %q; allowed values: %s", path, kind, formatEnum(kind.Enum()))
-	}
-	return validateAndNormalizePluginSpec(plugin, factory, path)
-}
-
-func formatEnum(values []any) string {
-	parts := make([]string, len(values))
-	for i, v := range values {
-		parts[i] = fmt.Sprintf("`%v`", v)
-	}
-	return strings.Join(parts, ", ")
-}
-
-// validateAndNormalizePluginSpec validates the plugin spec and writes the typed
-// struct (with defaults) back into plugin.Spec so that DB storage and API
-// responses contain normalized values.
-func validateAndNormalizePluginSpec(plugin *common.Plugin, factory func() any, path string) error {
-	if plugin.Kind == "" {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: plugin kind is required", path)
-	}
-	if plugin.Spec == nil {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: plugin spec is required", path)
-	}
-	// Re-marshal the spec and unmarshal into the typed struct.
-	specJSON, err := json.Marshal(plugin.Spec)
-	if err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
-	}
-	target := factory()
-	decoder := json.NewDecoder(bytes.NewReader(specJSON))
-	decoder.DisallowUnknownFields()
-	if err := decoder.Decode(target); err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
-	}
-	if err := validator.New().Struct(target); err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
-	}
-	// Write the typed struct back so defaults are included.
-	plugin.Spec = target
-	return nil
-}
-
-// validateQueryAllowedForPanel checks that the query plugin kind is permitted
-// for the given panel. For composite queries it recurses into sub-queries.
-func validateQueryAllowedForPanel(plugin common.Plugin, allowed []QueryPluginKind, panelKind PanelPluginKind, path string) error {
-	queryKind := QueryPluginKind(plugin.Kind)
-	if !slices.Contains(allowed, queryKind) {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
-			"%s: query kind %q is not supported by panel kind %q", path, queryKind, panelKind)
-	}
-
-	// For composite queries, validate each sub-query type.
-	if queryKind == QueryKindComposite && plugin.Spec != nil {
-		specJSON, err := json.Marshal(plugin.Spec)
-		if err != nil {
-			return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
-		}
-		var composite struct {
-			Queries []struct {
-				Type qb.QueryType `json:"type"`
-			} `json:"queries"`
-		}
-		if err := json.Unmarshal(specJSON, &composite); err != nil {
-			return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "%s.spec", path)
-		}
-		for si, sub := range composite.Queries {
-			pluginKind, ok := compositeSubQueryTypeToPluginKind[sub.Type]
-			if !ok {
-				continue
-			}
-			if !slices.Contains(allowed, pluginKind) {
-				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
-					"%s.spec.queries[%d]: sub-query type %q is not supported by panel kind %q",
-					path, si, sub.Type, panelKind)
-			}
-		}
-	}
-	return nil
-}

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -0,0 +1,107 @@
+package dashboardtypes
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"slices"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	v1 "github.com/perses/perses/pkg/model/api/v1"
+	"github.com/perses/perses/pkg/model/api/v1/common"
+)
+
+// DashboardData is the SigNoz dashboard v2 spec shape. It mirrors
+// v1.DashboardSpec (Perses) field-for-field, except every common.Plugin
+// occurrence is replaced with a typed SigNoz plugin whose OpenAPI schema is a
+// per-site discriminated oneOf.
+type DashboardData struct {
+	Display         *common.Display            `json:"display,omitempty"`
+	Datasources     map[string]*DatasourceSpec `json:"datasources,omitempty"`
+	Variables       []Variable                 `json:"variables,omitempty"`
+	Panels          map[string]*Panel          `json:"panels"`
+	Layouts         []Layout                   `json:"layouts"`
+	Duration        common.DurationString      `json:"duration"`
+	RefreshInterval common.DurationString      `json:"refreshInterval,omitempty"`
+	Links           []v1.Link                  `json:"links,omitempty"`
+}
+
+// ══════════════════════════════════════════════
+// Unmarshal + validate entry point
+// ══════════════════════════════════════════════
+
+func (d *DashboardData) UnmarshalJSON(data []byte) error {
+	dec := json.NewDecoder(bytes.NewReader(data))
+	dec.DisallowUnknownFields()
+	type alias DashboardData
+	var tmp alias
+	if err := dec.Decode(&tmp); err != nil {
+		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid dashboard spec")
+	}
+	*d = DashboardData(tmp)
+	return d.Validate()
+}
+
+// ══════════════════════════════════════════════
+// Cross-field validation
+// ══════════════════════════════════════════════
+
+func (d *DashboardData) Validate() error {
+	for key, panel := range d.Panels {
+		if panel == nil {
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.panels.%s: panel must not be null", key)
+		}
+		path := fmt.Sprintf("spec.panels.%s", key)
+		panelKind := panel.Spec.Plugin.Kind
+		if len(panel.Spec.Queries) == 0 {
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s.spec.queries: panel must have at least one query", path)
+		}
+		allowed := allowedQueryKinds[panelKind]
+		for qi, q := range panel.Spec.Queries {
+			queryPath := fmt.Sprintf("%s.spec.queries[%d].spec.plugin", path, qi)
+			if err := validateQueryAllowedForPanel(q.Spec.Plugin, allowed, panelKind, queryPath); err != nil {
+				return err
+			}
+		}
+	}
+	return nil
+}
+
+func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind, panelKind PanelPluginKind, path string) error {
+	if !slices.Contains(allowed, plugin.Kind) {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
+			"%s: query kind %q is not supported by panel kind %q", path, plugin.Kind, panelKind)
+	}
+
+	if plugin.Kind != QueryKindComposite {
+		return nil
+	}
+	composite, ok := plugin.Spec.(*CompositeQuerySpec)
+	if !ok || composite == nil {
+		// Unreachable via UnmarshalJSON; reaching here means a Go caller broke the Kind/Spec pairing.
+		return errors.NewInternalf(errors.CodeInternal, "%s: composite query plugin has unexpected spec type %T", path, plugin.Spec)
+	}
+	for si, sub := range composite.Queries {
+		subKind, ok := compositeSubQueryTypeToPluginKind[sub.Type]
+		if !ok {
+			continue
+		}
+		if !slices.Contains(allowed, subKind) {
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput,
+				"%s.spec.queries[%d]: sub-query type %q is not supported by panel kind %q",
+				path, si, sub.Type, panelKind)
+		}
+	}
+	return nil
+}
+
+var (
+	compositeSubQueryTypeToPluginKind = map[qb.QueryType]QueryPluginKind{
+		qb.QueryTypeBuilder:       QueryKindBuilder,
+		qb.QueryTypeFormula:       QueryKindFormula,
+		qb.QueryTypeTraceOperator: QueryKindTraceOperator,
+		qb.QueryTypePromQL:        QueryKindPromQL,
+		qb.QueryTypeClickHouseSQL: QueryKindClickHouseSQL,
+	}
+)

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -7,33 +7,75 @@ import (
 	"testing"
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 )
 
+func unmarshalDashboard(data []byte) (*DashboardData, error) {
+	var d DashboardData
+	if err := json.Unmarshal(data, &d); err != nil {
+		return nil, err
+	}
+	return &d, nil
+}
+
 func TestValidateBigExample(t *testing.T) {
 	data, err := os.ReadFile("testdata/perses.json")
 	require.NoError(t, err, "reading example file")
-	_, err = UnmarshalAndValidateDashboardV2JSON(data)
+	_, err = unmarshalDashboard(data)
 	require.NoError(t, err, "expected valid dashboard")
 }
 
 func TestValidateDashboardWithSections(t *testing.T) {
 	data, err := os.ReadFile("testdata/perses_with_sections.json")
 	require.NoError(t, err, "reading example file")
-	_, err = UnmarshalAndValidateDashboardV2JSON(data)
+	_, err = unmarshalDashboard(data)
 	require.NoError(t, err, "expected valid dashboard")
 }
 
 func TestInvalidateNotAJSON(t *testing.T) {
-	_, err := UnmarshalAndValidateDashboardV2JSON([]byte("not json"))
+	_, err := unmarshalDashboard([]byte("not json"))
 	require.Error(t, err, "expected error for invalid JSON")
 }
 
+// TestUnmarshalErrorPreservesNestedMessage guards the wrap on dec.Decode in
+// DashboardData.UnmarshalJSON. The wrap stamps a consistent type/code on
+// decode failures, but must not smother the rich messages produced by nested
+// UnmarshalJSON methods (panel/query/variable/datasource plugin envelopes).
+func TestUnmarshalErrorPreservesNestedMessage(t *testing.T) {
+	data := []byte(`{
+		"panels": {
+			"p1": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "NonExistentPanel", "spec": {}}
+				}
+			}
+		},
+		"layouts": []
+	}`)
+
+	_, err := unmarshalDashboard(data)
+	require.Error(t, err)
+
+	require.Contains(t, err.Error(), "unknown panel plugin kind",
+		"outer wrap should not smother the inner UnmarshalJSON message")
+	require.Contains(t, err.Error(), `"NonExistentPanel"`,
+		"the offending value should still appear in the error")
+	require.Contains(t, err.Error(), "allowed values:",
+		"the allowed-values hint should still appear in the error")
+
+	assert.True(t, errors.Ast(err, errors.TypeInvalidInput),
+		"outer wrap should classify the error as TypeInvalidInput")
+	assert.True(t, errors.Asc(err, ErrCodeDashboardInvalidInput),
+		"outer wrap should stamp ErrCodeDashboardInvalidInput")
+}
+
 func TestValidateEmptySpec(t *testing.T) {
 	// no variables no panels
 	data := []byte(`{}`)
-	_, err := UnmarshalAndValidateDashboardV2JSON(data)
+	_, err := unmarshalDashboard(data)
 	require.NoError(t, err, "expected valid")
 }
 
@@ -59,17 +101,13 @@ func TestValidateOnlyVariables(t *testing.T) {
 				"kind": "TextVariable",
 				"spec": {
 					"name": "mytext",
-					"value": "default",
-					"plugin": {
-						"kind": "signoz/TextboxVariable",
-						"spec": {}
-					}
+					"value": "default"
 				}
 			}
 		],
 		"layouts": []
 	}`)
-	_, err := UnmarshalAndValidateDashboardV2JSON(data)
+	_, err := unmarshalDashboard(data)
 	require.NoError(t, err, "expected valid")
 }
 
@@ -148,7 +186,7 @@ func TestInvalidateUnknownPluginKind(t *testing.T) {
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
+			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected error containing %q, got nil", tt.wantContain)
 			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
@@ -169,7 +207,7 @@ func TestInvalidateOneInvalidPanel(t *testing.T) {
 		},
 		"layouts": []
 	}`)
-	_, err := UnmarshalAndValidateDashboardV2JSON(data)
+	_, err := unmarshalDashboard(data)
 	require.Error(t, err, "expected error for invalid panel plugin kind")
 	require.Contains(t, err.Error(), "FakePanel", "error should mention FakePanel")
 }
@@ -245,7 +283,7 @@ func TestRejectUnknownFieldsInPluginSpec(t *testing.T) {
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
+			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected error for unknown field")
 			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
@@ -323,7 +361,7 @@ func TestInvalidateWrongFieldTypeInPluginSpec(t *testing.T) {
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
+			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected validation error")
 			if tt.wantContain != "" {
 				require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
@@ -531,13 +569,46 @@ func TestInvalidateBadPanelSpecValues(t *testing.T) {
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
+			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected error containing %q, got nil", tt.wantContain)
 			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
 	}
 }
 
+func TestInvalidatePanelWithoutQueries(t *testing.T) {
+	data := []byte(`{
+		"panels": {
+			"p1": {
+				"kind": "Panel",
+				"spec": {"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}}}
+			}
+		},
+		"layouts": []
+	}`)
+	_, err := unmarshalDashboard(data)
+	require.Error(t, err, "expected panel-without-queries to be rejected")
+	require.Contains(t, err.Error(), "at least one query")
+}
+
+func TestInvalidatePanelWithEmptyQueriesArray(t *testing.T) {
+	data := []byte(`{
+		"panels": {
+			"p1": {
+				"kind": "Panel",
+				"spec": {
+					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
+					"queries": []
+				}
+			}
+		},
+		"layouts": []
+	}`)
+	_, err := unmarshalDashboard(data)
+	require.Error(t, err, "expected panel with explicit empty queries array to be rejected")
+	require.Contains(t, err.Error(), "at least one query")
+}
+
 func TestValidateRequiredFields(t *testing.T) {
 	wrapVariable := func(pluginKind, pluginSpec string) string {
 		return `{
@@ -626,7 +697,7 @@ func TestValidateRequiredFields(t *testing.T) {
 
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			_, err := UnmarshalAndValidateDashboardV2JSON([]byte(tt.data))
+			_, err := unmarshalDashboard([]byte(tt.data))
 			require.Error(t, err, "expected error containing %q, got nil", tt.wantContain)
 			require.Contains(t, err.Error(), tt.wantContain, "error should mention %q", tt.wantContain)
 		})
@@ -642,13 +713,14 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 					"plugin": {
 						"kind": "signoz/TimeSeriesPanel",
 						"spec": {}
-					}
+					},
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			}
 		},
 		"layouts": []
 	}`)
-	d, err := UnmarshalAndValidateDashboardV2JSON(data)
+	d, err := unmarshalDashboard(data)
 	require.NoError(t, err, "unmarshal and validate failed")
 
 	// After validation+normalization, the plugin spec should be a typed struct.
@@ -689,13 +761,14 @@ func TestNumberPanelDefaults(t *testing.T) {
 					"plugin": {
 						"kind": "signoz/NumberPanel",
 						"spec": {"thresholds": [{"value": 100, "color": "Red"}]}
-					}
+					},
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			}
 		},
 		"layouts": []
 	}`)
-	d, err := UnmarshalAndValidateDashboardV2JSON(data)
+	d, err := unmarshalDashboard(data)
 	require.NoError(t, err, "unmarshal and validate failed")
 
 	require.IsType(t, &NumberPanelSpec{}, d.Panels["p1"].Spec.Plugin.Spec)
@@ -716,6 +789,30 @@ func TestNumberPanelDefaults(t *testing.T) {
 		"expected stored/response JSON to contain operator:>, got: %s", outputStr)
 }
 
+// TestPersesFixtureStorageRoundTrip exercises the typed → map[string]any →
+// typed cycle that the create/get path performs against the kitchen-sink
+// fixture. Catches plugin specs whose UnmarshalJSON expects a different shape
+// than the default MarshalJSON emits.
+func TestPersesFixtureStorageRoundTrip(t *testing.T) {
+	raw, err := os.ReadFile("testdata/perses.json")
+	require.NoError(t, err)
+
+	var data DashboardData
+	require.NoError(t, json.Unmarshal(raw, &data), "initial unmarshal")
+
+	marshaled, err := json.Marshal(data)
+	require.NoError(t, err, "marshal typed → JSON")
+
+	var asMap map[string]any
+	require.NoError(t, json.Unmarshal(marshaled, &asMap), "JSON → map (storage shape)")
+
+	remarshaled, err := json.Marshal(asMap)
+	require.NoError(t, err, "map → JSON (read-back shape)")
+
+	var roundtripped DashboardData
+	require.NoError(t, json.Unmarshal(remarshaled, &roundtripped), "JSON → typed (the failure mode)")
+}
+
 // TestStorageRoundTrip simulates the future DB store/load cycle:
 // marshal the normalized dashboard to JSON (what would be written to DB),
 // then unmarshal it back (what would be read from DB), and verify defaults survive.
@@ -728,7 +825,8 @@ func TestStorageRoundTrip(t *testing.T) {
 					"plugin": {
 						"kind": "signoz/TimeSeriesPanel",
 						"spec": {}
-					}
+					},
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			},
 			"p2": {
@@ -737,7 +835,8 @@ func TestStorageRoundTrip(t *testing.T) {
 					"plugin": {
 						"kind": "signoz/NumberPanel",
 						"spec": {"thresholds": [{"value": 100, "color": "Red"}]}
-					}
+					},
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			}
 		},
@@ -745,7 +844,7 @@ func TestStorageRoundTrip(t *testing.T) {
 	}`)
 
 	// Step 1: Unmarshal + validate + normalize (what the API handler does).
-	d, err := UnmarshalAndValidateDashboardV2JSON(input)
+	d, err := unmarshalDashboard(input)
 	require.NoError(t, err, "unmarshal and validate failed")
 
 	// Step 1.5: Verify struct fields have correct defaults (extra validation before storing).
@@ -765,7 +864,7 @@ func TestStorageRoundTrip(t *testing.T) {
 	require.NoError(t, err, "marshal for storage failed")
 
 	// Step 3: Unmarshal from JSON (simulates reading from DB).
-	loaded, err := UnmarshalAndValidateDashboardV2JSON(stored)
+	loaded, err := unmarshalDashboard(stored)
 	require.NoError(t, err, "unmarshal from storage failed")
 
 	// Step 3.5: Verify struct fields have correct defaults after loading (before returning in API).
@@ -878,7 +977,7 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 
 	for _, tc := range cases {
 		t.Run(tc.name, func(t *testing.T) {
-			_, err := UnmarshalAndValidateDashboardV2JSON(tc.data)
+			_, err := unmarshalDashboard(tc.data)
 			if tc.wantErr {
 				require.Error(t, err)
 			} else {

pkg/types/dashboardtypes/perses_drift_test.go

@@ -0,0 +1,170 @@
+package dashboardtypes
+
+// TestDashboardDataMatchesPerses asserts that DashboardData
+// and every nested SigNoz-owned type cover the JSON field set of their Perses
+// counterpart.
+
+import (
+	"reflect"
+	"sort"
+	"strings"
+	"testing"
+
+	v1 "github.com/perses/perses/pkg/model/api/v1"
+	"github.com/perses/perses/pkg/model/api/v1/dashboard"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func TestDashboardDataMatchesPerses(t *testing.T) {
+	cases := []struct {
+		name   string
+		ours   reflect.Type
+		perses reflect.Type
+	}{
+		{"DashboardSpec", typeOf[DashboardData](), typeOf[v1.DashboardSpec]()},
+		{"Panel", typeOf[Panel](), typeOf[v1.Panel]()},
+		{"PanelSpec", typeOf[PanelSpec](), typeOf[v1.PanelSpec]()},
+		{"Query", typeOf[Query](), typeOf[v1.Query]()},
+		{"QuerySpec", typeOf[QuerySpec](), typeOf[v1.QuerySpec]()},
+		{"DatasourceSpec", typeOf[DatasourceSpec](), typeOf[v1.DatasourceSpec]()},
+		{"Variable", typeOf[Variable](), typeOf[dashboard.Variable]()},
+		{"ListVariableSpec", typeOf[ListVariableSpec](), typeOf[dashboard.ListVariableSpec]()},
+		{"Layout", typeOf[Layout](), typeOf[dashboard.Layout]()},
+	}
+
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			missing, extra := drift(c.ours, c.perses)
+
+			assert.Empty(t, missing,
+				"DashboardData (%s) is missing json fields present on Perses %s — upstream likely added or renamed a field",
+				c.ours.Name(), c.perses.Name())
+			assert.Empty(t, extra,
+				"DashboardData (%s) has json fields absent on Perses %s — upstream likely removed a field or we added one without the counterpart",
+				c.ours.Name(), c.perses.Name())
+		})
+	}
+}
+
+func TestDriftDetectionMechanics(t *testing.T) {
+	t.Run("upstream added a field", func(t *testing.T) {
+		type ours struct {
+			Name string `json:"name"`
+		}
+		type perses struct {
+			Name        string `json:"name"`
+			Description string `json:"description"`
+		}
+		missing, extra := drift(typeOf[ours](), typeOf[perses]())
+		assert.Equal(t, []string{"description"}, missing, "missing fires: upstream has a field we don't")
+		assert.Empty(t, extra)
+	})
+
+	t.Run("upstream removed a field", func(t *testing.T) {
+		type ours struct {
+			Name        string `json:"name"`
+			Description string `json:"description"`
+		}
+		type perses struct {
+			Name string `json:"name"`
+		}
+		missing, extra := drift(typeOf[ours](), typeOf[perses]())
+		assert.Empty(t, missing)
+		assert.Equal(t, []string{"description"}, extra, "extra fires: we kept a field upstream removed")
+	})
+
+	t.Run("upstream renamed a field", func(t *testing.T) {
+		type ours struct {
+			Name string `json:"name"`
+		}
+		type perses struct {
+			Name string `json:"title"`
+		}
+		missing, extra := drift(typeOf[ours](), typeOf[perses]())
+		assert.Equal(t, []string{"title"}, missing, "missing fires for the new name")
+		assert.Equal(t, []string{"name"}, extra, "extra fires for the old name — both fire on a rename")
+	})
+
+	t.Run("we added a field upstream does not have", func(t *testing.T) {
+		type ours struct {
+			Name     string `json:"name"`
+			Internal string `json:"internal"`
+		}
+		type perses struct {
+			Name string `json:"name"`
+		}
+		missing, extra := drift(typeOf[ours](), typeOf[perses]())
+		assert.Empty(t, missing)
+		assert.Equal(t, []string{"internal"}, extra, "extra fires: we added a field with no upstream counterpart")
+	})
+
+	t.Run("embedded struct flattens — drift inside the embed is caught", func(t *testing.T) {
+		type embedded struct {
+			Display string `json:"display"`
+			NewBit  string `json:"newBit"` // upstream added this inside the embed
+		}
+		type ours struct {
+			Display string `json:"display"`
+			Name    string `json:"name"`
+		}
+		type perses struct {
+			embedded `json:",inline"`
+			Name     string `json:"name"`
+		}
+		missing, extra := drift(typeOf[ours](), typeOf[perses]())
+		assert.Equal(t, []string{"newBit"}, missing, "field added inside an inlined embed surfaces at the parent level")
+		assert.Empty(t, extra)
+	})
+}
+
+func drift(ours, perses reflect.Type) (missing, extra []string) {
+	o, p := jsonFields(ours), jsonFields(perses)
+	return sortedDiff(p, o), sortedDiff(o, p)
+}
+
+// jsonFields returns the set of json tag names for a struct, flattening
+// anonymous embedded fields (matching encoding/json behavior).
+func jsonFields(t reflect.Type) map[string]struct{} {
+	out := map[string]struct{}{}
+	if t.Kind() != reflect.Struct {
+		return out
+	}
+	for i := 0; i < t.NumField(); i++ {
+		f := t.Field(i)
+		// Skip unexported fields (e.g., dashboard.ListVariableSpec has an
+		// unexported `variableSpec` interface tag).
+		if !f.IsExported() && !f.Anonymous {
+			continue
+		}
+		tag := f.Tag.Get("json")
+		name := strings.Split(tag, ",")[0]
+		// Anonymous embed with empty json name (no tag, or `json:",inline"` /
+		// `json:",omitempty"`-style options-only tag) is flattened by encoding/json.
+		if f.Anonymous && name == "" {
+			for k := range jsonFields(f.Type) {
+				out[k] = struct{}{}
+			}
+			continue
+		}
+		if tag == "-" || name == "" {
+			continue
+		}
+		out[name] = struct{}{}
+	}
+	return out
+}
+
+// sortedDiff returns keys in a but not in b, sorted.
+func sortedDiff(a, b map[string]struct{}) []string {
+	var diff []string
+	for k := range a {
+		if _, ok := b[k]; !ok {
+			diff = append(diff, k)
+		}
+	}
+	sort.Strings(diff)
+	return diff
+}
+
+func typeOf[T any]() reflect.Type { return reflect.TypeOf((*T)(nil)).Elem() }

pkg/types/dashboardtypes/perses_plugin_wrappers.go

@@ -0,0 +1,312 @@
+package dashboardtypes
+
+import (
+	"bytes"
+	"encoding/json"
+	"maps"
+	"slices"
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+
+	"github.com/go-playground/validator/v10"
+	"github.com/swaggest/jsonschema-go"
+)
+
+// ══════════════════════════════════════════════
+// Panel plugin
+// ══════════════════════════════════════════════
+
+type PanelPlugin struct {
+	Kind PanelPluginKind `json:"kind"`
+	Spec any             `json:"spec"`
+}
+
+// PrepareJSONSchema drops the reflected struct shape (type: object, properties)
+// from the envelope so that only the JSONSchemaOneOf result binds.
+func (PanelPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return clearOneOfParentShape(s)
+}
+
+func (p *PanelPlugin) UnmarshalJSON(data []byte) error {
+	kind, specJSON, err := extractKindAndSpec(data)
+	if err != nil {
+		return err
+	}
+	factory, ok := panelPluginSpecs[PanelPluginKind(kind)]
+	if !ok {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown panel plugin kind %q; allowed values: %s", kind, allowedValuesForKind(slices.Sorted(maps.Keys(panelPluginSpecs))))
+	}
+	spec, err := decodeSpec(specJSON, factory(), kind)
+	if err != nil {
+		return err
+	}
+	p.Kind = PanelPluginKind(kind)
+	p.Spec = spec
+	return nil
+}
+
+func (PanelPlugin) JSONSchemaOneOf() []any {
+	return []any{
+		PanelPluginVariant[TimeSeriesPanelSpec]{Kind: string(PanelKindTimeSeries)},
+		PanelPluginVariant[BarChartPanelSpec]{Kind: string(PanelKindBarChart)},
+		PanelPluginVariant[NumberPanelSpec]{Kind: string(PanelKindNumber)},
+		PanelPluginVariant[PieChartPanelSpec]{Kind: string(PanelKindPieChart)},
+		PanelPluginVariant[TablePanelSpec]{Kind: string(PanelKindTable)},
+		PanelPluginVariant[HistogramPanelSpec]{Kind: string(PanelKindHistogram)},
+		PanelPluginVariant[ListPanelSpec]{Kind: string(PanelKindList)},
+	}
+}
+
+type PanelPluginVariant[S any] struct {
+	Kind string `json:"kind" required:"true"`
+	Spec S      `json:"spec" required:"true"`
+}
+
+func (v PanelPluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return restrictKindToOneValue(s, v.Kind)
+}
+
+// ══════════════════════════════════════════════
+// Query plugin
+// ══════════════════════════════════════════════
+
+type QueryPlugin struct {
+	Kind QueryPluginKind `json:"kind"`
+	Spec any             `json:"spec"`
+}
+
+func (QueryPlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return clearOneOfParentShape(s)
+}
+
+func (p *QueryPlugin) UnmarshalJSON(data []byte) error {
+	kind, specJSON, err := extractKindAndSpec(data)
+	if err != nil {
+		return err
+	}
+	factory, ok := queryPluginSpecs[QueryPluginKind(kind)]
+	if !ok {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown query plugin kind %q; allowed values: %s", kind, allowedValuesForKind(slices.Sorted(maps.Keys(queryPluginSpecs))))
+	}
+	spec, err := decodeSpec(specJSON, factory(), kind)
+	if err != nil {
+		return err
+	}
+	p.Kind = QueryPluginKind(kind)
+	p.Spec = spec
+	return nil
+}
+
+func (QueryPlugin) JSONSchemaOneOf() []any {
+	return []any{
+		QueryPluginVariant[BuilderQuerySpec]{Kind: string(QueryKindBuilder)},
+		QueryPluginVariant[CompositeQuerySpec]{Kind: string(QueryKindComposite)},
+		QueryPluginVariant[FormulaSpec]{Kind: string(QueryKindFormula)},
+		QueryPluginVariant[PromQLQuerySpec]{Kind: string(QueryKindPromQL)},
+		QueryPluginVariant[ClickHouseSQLQuerySpec]{Kind: string(QueryKindClickHouseSQL)},
+		QueryPluginVariant[TraceOperatorSpec]{Kind: string(QueryKindTraceOperator)},
+	}
+}
+
+type QueryPluginVariant[S any] struct {
+	Kind string `json:"kind" required:"true"`
+	Spec S      `json:"spec" required:"true"`
+}
+
+func (v QueryPluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return restrictKindToOneValue(s, v.Kind)
+}
+
+// ══════════════════════════════════════════════
+// Variable plugin
+// ══════════════════════════════════════════════
+
+type VariablePlugin struct {
+	Kind VariablePluginKind `json:"kind"`
+	Spec any                `json:"spec"`
+}
+
+func (VariablePlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return clearOneOfParentShape(s)
+}
+
+func (p *VariablePlugin) UnmarshalJSON(data []byte) error {
+	kind, specJSON, err := extractKindAndSpec(data)
+	if err != nil {
+		return err
+	}
+	factory, ok := variablePluginSpecs[VariablePluginKind(kind)]
+	if !ok {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown variable plugin kind %q; allowed values: %s", kind, allowedValuesForKind(slices.Sorted(maps.Keys(variablePluginSpecs))))
+	}
+	spec, err := decodeSpec(specJSON, factory(), kind)
+	if err != nil {
+		return err
+	}
+	p.Kind = VariablePluginKind(kind)
+	p.Spec = spec
+	return nil
+}
+
+func (VariablePlugin) JSONSchemaOneOf() []any {
+	return []any{
+		VariablePluginVariant[DynamicVariableSpec]{Kind: string(VariableKindDynamic)},
+		VariablePluginVariant[QueryVariableSpec]{Kind: string(VariableKindQuery)},
+		VariablePluginVariant[CustomVariableSpec]{Kind: string(VariableKindCustom)},
+	}
+}
+
+type VariablePluginVariant[S any] struct {
+	Kind string `json:"kind" required:"true"`
+	Spec S      `json:"spec" required:"true"`
+}
+
+func (v VariablePluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return restrictKindToOneValue(s, v.Kind)
+}
+
+// ══════════════════════════════════════════════
+// Datasource plugin
+// ══════════════════════════════════════════════
+
+type DatasourcePlugin struct {
+	Kind DatasourcePluginKind `json:"kind"`
+	Spec any                  `json:"spec"`
+}
+
+func (DatasourcePlugin) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return clearOneOfParentShape(s)
+}
+
+func (p *DatasourcePlugin) UnmarshalJSON(data []byte) error {
+	kind, specJSON, err := extractKindAndSpec(data)
+	if err != nil {
+		return err
+	}
+	factory, ok := datasourcePluginSpecs[DatasourcePluginKind(kind)]
+	if !ok {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown datasource plugin kind %q; allowed values: %s", kind, allowedValuesForKind(slices.Sorted(maps.Keys(datasourcePluginSpecs))))
+	}
+	spec, err := decodeSpec(specJSON, factory(), kind)
+	if err != nil {
+		return err
+	}
+	p.Kind = DatasourcePluginKind(kind)
+	p.Spec = spec
+	return nil
+}
+
+func (DatasourcePlugin) JSONSchemaOneOf() []any {
+	return []any{
+		DatasourcePluginVariant[struct{}]{Kind: string(DatasourceKindSigNoz)},
+	}
+}
+
+type DatasourcePluginVariant[S any] struct {
+	Kind string `json:"kind" required:"true"`
+	Spec S      `json:"spec" required:"true"`
+}
+
+func (v DatasourcePluginVariant[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return restrictKindToOneValue(s, v.Kind)
+}
+
+// ══════════════════════════════════════════════
+// Helpers
+// ══════════════════════════════════════════════
+
+var (
+	panelPluginSpecs = map[PanelPluginKind]func() any{
+		PanelKindTimeSeries: func() any { return new(TimeSeriesPanelSpec) },
+		PanelKindBarChart:   func() any { return new(BarChartPanelSpec) },
+		PanelKindNumber:     func() any { return new(NumberPanelSpec) },
+		PanelKindPieChart:   func() any { return new(PieChartPanelSpec) },
+		PanelKindTable:      func() any { return new(TablePanelSpec) },
+		PanelKindHistogram:  func() any { return new(HistogramPanelSpec) },
+		PanelKindList:       func() any { return new(ListPanelSpec) },
+	}
+	queryPluginSpecs = map[QueryPluginKind]func() any{
+		QueryKindBuilder:       func() any { return new(BuilderQuerySpec) },
+		QueryKindComposite:     func() any { return new(CompositeQuerySpec) },
+		QueryKindFormula:       func() any { return new(FormulaSpec) },
+		QueryKindPromQL:        func() any { return new(PromQLQuerySpec) },
+		QueryKindClickHouseSQL: func() any { return new(ClickHouseSQLQuerySpec) },
+		QueryKindTraceOperator: func() any { return new(TraceOperatorSpec) },
+	}
+	variablePluginSpecs = map[VariablePluginKind]func() any{
+		VariableKindDynamic: func() any { return new(DynamicVariableSpec) },
+		VariableKindQuery:   func() any { return new(QueryVariableSpec) },
+		VariableKindCustom:  func() any { return new(CustomVariableSpec) },
+	}
+	datasourcePluginSpecs = map[DatasourcePluginKind]func() any{
+		DatasourceKindSigNoz: func() any { return new(struct{}) },
+	}
+
+	allowedQueryKinds = map[PanelPluginKind][]QueryPluginKind{
+		PanelKindTimeSeries: {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindBarChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindNumber:     {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindHistogram:  {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindPromQL, QueryKindClickHouseSQL},
+		PanelKindPieChart:   {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
+		PanelKindTable:      {QueryKindBuilder, QueryKindComposite, QueryKindFormula, QueryKindTraceOperator, QueryKindClickHouseSQL},
+		PanelKindList:       {QueryKindBuilder},
+	}
+)
+
+func allowedValuesForKind[K ~string](kinds []K) string {
+	parts := make([]string, len(kinds))
+	for i, k := range kinds {
+		parts[i] = "`" + string(k) + "`"
+	}
+	return strings.Join(parts, ", ")
+}
+
+// extractKindAndSpec parses a {"kind": "...", "spec": {...}} envelope and returns
+// kind and the raw spec bytes for typed decoding.
+func extractKindAndSpec(data []byte) (string, []byte, error) {
+	var head struct {
+		Kind string          `json:"kind"`
+		Spec json.RawMessage `json:"spec"`
+	}
+	if err := json.Unmarshal(data, &head); err != nil {
+		return "", nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid plugin envelope")
+	}
+	return head.Kind, head.Spec, nil
+}
+
+// decodeSpec strict-decodes a spec JSON into target and runs struct-tag validation (go-playground/validator).
+func decodeSpec(specJSON []byte, target any, kind string) (any, error) {
+	if len(specJSON) == 0 {
+		return nil, errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "kind %q: spec is required", kind)
+	}
+	dec := json.NewDecoder(bytes.NewReader(specJSON))
+	dec.DisallowUnknownFields()
+	if err := dec.Decode(target); err != nil {
+		return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "kind %q: invalid spec JSON", kind)
+	}
+	if err := validator.New().Struct(target); err != nil {
+		return nil, errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "kind %q: spec failed validation", kind)
+	}
+	return target, nil
+}
+
+// clearOneOfParentShape drops Type and Properties on a schema that also has a JSONSchemaOneOf.
+func clearOneOfParentShape(s *jsonschema.Schema) error {
+	s.Type = nil
+	s.Properties = nil
+	return nil
+}
+
+// restrictKindToOneValue ensures that the schema only allows one Kind value for a type.
+// For eg. PanelPluginVariant[TimeSeriesPanelSpec]{Kind: string(PanelKindTimeSeries)} should
+// only allow "signoz/TimeSeriesPanel" in its kind field.
+func restrictKindToOneValue(schema *jsonschema.Schema, kind string) error {
+	kindProp, ok := schema.Properties["kind"]
+	if !ok || kindProp.TypeObject == nil {
+		return errors.NewInternalf(errors.CodeInternal, "variant schema missing `kind` property")
+	}
+	kindProp.TypeObject.WithEnum(kind)
+	schema.Properties["kind"] = kindProp
+	return nil
+}

pkg/types/dashboardtypes/perses_replicas.go

@@ -0,0 +1,182 @@
+package dashboardtypes
+
+import (
+	"maps"
+	"slices"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	v1 "github.com/perses/perses/pkg/model/api/v1"
+	"github.com/perses/perses/pkg/model/api/v1/common"
+	"github.com/perses/perses/pkg/model/api/v1/dashboard"
+	"github.com/perses/perses/pkg/model/api/v1/variable"
+	"github.com/swaggest/jsonschema-go"
+)
+
+// ══════════════════════════════════════════════
+// Datasource
+// ══════════════════════════════════════════════
+
+type DatasourceSpec struct {
+	Display *common.Display  `json:"display,omitempty"`
+	Default bool             `json:"default"`
+	Plugin  DatasourcePlugin `json:"plugin"`
+}
+
+// ══════════════════════════════════════════════
+// Panel
+// ══════════════════════════════════════════════
+
+type Panel struct {
+	Kind string    `json:"kind"`
+	Spec PanelSpec `json:"spec"`
+}
+
+type PanelSpec struct {
+	Display *v1.PanelDisplay `json:"display,omitempty"`
+	Plugin  PanelPlugin      `json:"plugin"`
+	Queries []Query          `json:"queries,omitempty"`
+	Links   []v1.Link        `json:"links,omitempty"`
+}
+
+// ══════════════════════════════════════════════
+// Query
+// ══════════════════════════════════════════════
+
+type Query struct {
+	Kind string    `json:"kind"`
+	Spec QuerySpec `json:"spec"`
+}
+
+type QuerySpec struct {
+	Name   string      `json:"name,omitempty"`
+	Plugin QueryPlugin `json:"plugin"`
+}
+
+// ══════════════════════════════════════════════
+// Variable
+// ══════════════════════════════════════════════
+
+// Variable is the list/text sum type. Spec is set to *ListVariableSpec or
+// *dashboard.TextVariableSpec by UnmarshalJSON based on Kind. The schema is a
+// discriminated oneOf (see JSONSchemaOneOf).
+type Variable struct {
+	Kind variable.Kind `json:"kind"`
+	Spec any           `json:"spec"`
+}
+
+func (Variable) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return clearOneOfParentShape(s)
+}
+
+func (v *Variable) UnmarshalJSON(data []byte) error {
+	kind, specJSON, err := extractKindAndSpec(data)
+	if err != nil {
+		return err
+	}
+	switch kind {
+	case string(variable.KindList):
+		spec, err := decodeSpec(specJSON, new(ListVariableSpec), kind)
+		if err != nil {
+			return err
+		}
+		v.Kind = variable.KindList
+		v.Spec = spec
+	case string(variable.KindText):
+		spec, err := decodeSpec(specJSON, new(dashboard.TextVariableSpec), kind)
+		if err != nil {
+			return err
+		}
+		v.Kind = variable.KindText
+		v.Spec = spec
+	default:
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown variable kind %q; allowed values: %s", kind, allowedValuesForKind([]variable.Kind{variable.KindList, variable.KindText}))
+	}
+	return nil
+}
+
+func (Variable) JSONSchemaOneOf() []any {
+	return []any{
+		VariableEnvelope[ListVariableSpec]{Kind: string(variable.KindList)},
+		VariableEnvelope[dashboard.TextVariableSpec]{Kind: string(variable.KindText)},
+	}
+}
+
+type VariableEnvelope[S any] struct {
+	Kind string `json:"kind" required:"true"`
+	Spec S      `json:"spec" required:"true"`
+}
+
+func (v VariableEnvelope[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return restrictKindToOneValue(s, v.Kind)
+}
+
+// ListVariableSpec mirrors dashboard.ListVariableSpec (variable.ListSpec
+// fields + Name) but with a typed VariablePlugin replacing common.Plugin.
+type ListVariableSpec struct {
+	Display         *variable.Display      `json:"display,omitempty"`
+	DefaultValue    *variable.DefaultValue `json:"defaultValue,omitempty"`
+	AllowAllValue   bool                   `json:"allowAllValue"`
+	AllowMultiple   bool                   `json:"allowMultiple"`
+	CustomAllValue  string                 `json:"customAllValue,omitempty"`
+	CapturingRegexp string                 `json:"capturingRegexp,omitempty"`
+	Sort            *variable.Sort         `json:"sort,omitempty"`
+	Plugin          VariablePlugin         `json:"plugin"`
+	Name            string                 `json:"name"`
+}
+
+// ══════════════════════════════════════════════
+// Layout
+// ══════════════════════════════════════════════
+
+// Layout is the dashboard layout sum type. Spec is populated by UnmarshalJSON
+// with the concrete layout spec struct (today only dashboard.GridLayoutSpec)
+// based on Kind. No plugin is involved, so we reuse the Perses spec types as
+// leaf imports.
+type Layout struct {
+	Kind dashboard.LayoutKind `json:"kind"`
+	Spec any                  `json:"spec"`
+}
+
+// layoutSpecs is the layout sum type factory. Perses only defines
+// KindGridLayout today; adding a new kind upstream surfaces as an
+// "unknown layout kind" runtime error here until we add it.
+var layoutSpecs = map[dashboard.LayoutKind]func() any{
+	dashboard.KindGridLayout: func() any { return new(dashboard.GridLayoutSpec) },
+}
+
+func (Layout) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return clearOneOfParentShape(s)
+}
+
+func (l *Layout) UnmarshalJSON(data []byte) error {
+	kind, specJSON, err := extractKindAndSpec(data)
+	if err != nil {
+		return err
+	}
+	factory, ok := layoutSpecs[dashboard.LayoutKind(kind)]
+	if !ok {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown layout kind %q; allowed values: %s", kind, allowedValuesForKind(slices.Sorted(maps.Keys(layoutSpecs))))
+	}
+	spec, err := decodeSpec(specJSON, factory(), kind)
+	if err != nil {
+		return err
+	}
+	l.Kind = dashboard.LayoutKind(kind)
+	l.Spec = spec
+	return nil
+}
+
+func (Layout) JSONSchemaOneOf() []any {
+	return []any{
+		LayoutEnvelope[dashboard.GridLayoutSpec]{Kind: string(dashboard.KindGridLayout)},
+	}
+}
+
+type LayoutEnvelope[S any] struct {
+	Kind string `json:"kind" required:"true"`
+	Spec S      `json:"spec" required:"true"`
+}
+
+func (v LayoutEnvelope[S]) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return restrictKindToOneValue(s, v.Kind)
+}

pkg/types/dashboardtypes/perses_signoz_plugins.go

@@ -8,6 +8,7 @@ import (
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/swaggest/jsonschema-go"
 )
 
 // ══════════════════════════════════════════════
@@ -20,11 +21,10 @@ const (
 	VariableKindDynamic VariablePluginKind = "signoz/DynamicVariable"
 	VariableKindQuery   VariablePluginKind = "signoz/QueryVariable"
 	VariableKindCustom  VariablePluginKind = "signoz/CustomVariable"
-	VariableKindTextbox VariablePluginKind = "signoz/TextboxVariable"
 )
 
 func (VariablePluginKind) Enum() []any {
-	return []any{VariableKindDynamic, VariableKindQuery, VariableKindCustom, VariableKindTextbox}
+	return []any{VariableKindDynamic, VariableKindQuery, VariableKindCustom}
 }
 
 type DynamicVariableSpec struct {
@@ -42,8 +42,6 @@ type CustomVariableSpec struct {
 	CustomValue string `json:"customValue" validate:"required" required:"true"`
 }
 
-type TextboxVariableSpec struct{}
-
 // ══════════════════════════════════════════════
 // SigNoz query plugin specs — aliased from querybuildertypesv5
 // ══════════════════════════════════════════════
@@ -87,6 +85,30 @@ func (b *BuilderQuerySpec) UnmarshalJSON(data []byte) error {
 	return nil
 }
 
+// MarshalJSON delegates to the inner Spec so the on-wire shape matches what
+// UnmarshalJSON expects (a flat builder-query payload with `signal` at the top
+// level). Without this, Go's default would wrap it as {"Spec": {...}} and the
+// signal-dispatch on read would fail.
+func (b BuilderQuerySpec) MarshalJSON() ([]byte, error) {
+	return json.Marshal(b.Spec)
+}
+
+// PrepareJSONSchema drops the reflected struct shape so only the
+// JSONSchemaOneOf result binds.
+func (BuilderQuerySpec) PrepareJSONSchema(s *jsonschema.Schema) error {
+	return clearOneOfParentShape(s)
+}
+
+// JSONSchemaOneOf exposes the three signal-dispatched shapes a builder query
+// can take. Mirrors qb.UnmarshalBuilderQueryBySignal's runtime dispatch.
+func (BuilderQuerySpec) JSONSchemaOneOf() []any {
+	return []any{
+		qb.QueryBuilderQuery[qb.LogAggregation]{},
+		qb.QueryBuilderQuery[qb.MetricAggregation]{},
+		qb.QueryBuilderQuery[qb.TraceAggregation]{},
+	}
+}
+
 // ══════════════════════════════════════════════
 // SigNoz panel plugin specs
 // ══════════════════════════════════════════════

pkg/types/dashboardtypes/testdata/perses.json

@@ -76,11 +76,7 @@
                 "display": {
                     "name": "textboxvar"
                 },
-                "value": "defaultvaluegoeshere",
-                "plugin": {
-                    "kind": "signoz/TextboxVariable",
-                    "spec": {}
-                }
+                "value": "defaultvaluegoeshere"
             }
         }
     ],