fix: optimize query key for aliasMap to prevent jitter #1351
Conversation
Fixes: HDX-2787 During live tail, the date range changes every few seconds (e.g., from 9:00-9:15 to 9:02-9:17, etc...). The original aliasMap query key included the entire config object, which contains the dateRange property. Every date range change triggered a refetch of the alias map, even though aliases are derived from the SELECT statement and not from the date range. While refetching, react-query sets aliasMap to undefined. This caused column IDs to change. React-table uses column IDs as keys to track resize state, so when the ID changes, it loses the stored width and resets to the default size, causing the visible jitter. Now we have a consistent aliasMap with the added benefit of less network requests.
🦋 Changeset detectedLatest commit: 813fc0a The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Code ReviewOverall Assessment: The fix correctly addresses the live tail jitter issue by optimizing the query key. The approach is sound - excluding absolute dateRange values while preserving duration when needed. Issues Found:
Positive Aspects:✅ Correctly excludes absolute dateRange times while preserving duration for granularity changes Recommendation: Address the missing query key properties to ensure aliasMap cache invalidates correctly when those config properties change. |
| placeholderData: keepPreviousData, | ||
| queryKey: ['aliasMap', dbSqlRowTableConfig, 'withPlaceholder'], | ||
| }); | ||
| const { data: aliasMap } = useAliasMapFromChartConfig(dbSqlRowTableConfig); |
There was a problem hiding this comment.
this was actually a workaround for this behavior in another spot. The workaround is to use keepPreviousData. The changes to the query key remove the need for this
…to tom/livetail-jitter
E2E Test Results✅ All tests passed • 40 passed • 3 skipped • 303s
|
Fixes: HDX-2787
During live tail, the date range changes every few seconds (e.g., from 9:00-9:15 to 9:02-9:17, etc...). The original aliasMap query key included the entire config object, which contains the dateRange property. Every date range change triggered a refetch of the alias map, even though aliases are derived from the SELECT statement and not from the date range.
While refetching, react-query sets aliasMap to undefined. This caused column IDs to change. React-table uses column IDs as keys to track resize state, so when the ID changes, it loses the stored width and resets to the default size, causing the visible jitter.
Now we have a consistent aliasMap with the added benefit of less network requests.