diff --git a/.changeset/pretty-sloths-admire.md b/.changeset/pretty-sloths-admire.md new file mode 100644 index 000000000..a878c9bf5 --- /dev/null +++ b/.changeset/pretty-sloths-admire.md @@ -0,0 +1,5 @@ +--- +"@hyperdx/app": patch +--- + +fix: optimize query key for aliasMap to prevent jitter diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx index d45052cf4..90c83a3bc 100644 --- a/packages/app/src/DBSearchPage.tsx +++ b/packages/app/src/DBSearchPage.tsx @@ -57,7 +57,7 @@ import { useDocumentVisibility, } from '@mantine/hooks'; import { notifications } from '@mantine/notifications'; -import { keepPreviousData, useIsFetching } from '@tanstack/react-query'; +import { useIsFetching } from '@tanstack/react-query'; import { SortingState } from '@tanstack/react-table'; import CodeMirror from '@uiw/react-codemirror'; @@ -1147,10 +1147,7 @@ function DBSearchPage() { } }, [isReady, queryReady, isChartConfigLoading, onSearch]); - const { data: aliasMap } = useAliasMapFromChartConfig(dbSqlRowTableConfig, { - placeholderData: keepPreviousData, - queryKey: ['aliasMap', dbSqlRowTableConfig, 'withPlaceholder'], - }); + const { data: aliasMap } = useAliasMapFromChartConfig(dbSqlRowTableConfig); const aliasWith = useMemo( () => diff --git a/packages/app/src/hooks/useChartConfig.tsx b/packages/app/src/hooks/useChartConfig.tsx index 54fa77f32..591f27de2 100644 --- a/packages/app/src/hooks/useChartConfig.tsx +++ b/packages/app/src/hooks/useChartConfig.tsx @@ -286,8 +286,30 @@ export function useAliasMapFromChartConfig( config: ChartConfigWithOptDateRange | undefined, options?: UseQueryOptions>, ) { + // For granularity: 'auto', the bucket size depends on dateRange duration (not absolute times). + // Include duration in key to detect when bucket size changes, but omit absolute times + // to prevent refetches when the time window just slides forward (e.g., live tail). + const dateRangeDuration = + config?.dateRange && isUsingGranularity(config) + ? config.dateRange[1].getTime() - config.dateRange[0].getTime() + : undefined; + return useQuery>({ - queryKey: ['aliasMap', config], + // Only include config properties that affect SELECT structure and aliases. + // When adding new ChartConfig fields, check renderChartConfig.ts to see if they + // affect the SELECT clause. If yes, add them here to avoid stale alias maps. + queryKey: [ + 'aliasMap', + config?.select, + config?.from, + config?.connection, + config?.with, + config?.groupBy, + config?.selectGroupBy, + config?.granularity, + config?.seriesReturnType, + dateRangeDuration, + ], queryFn: async () => { if (config == null) { return {};