feat: disable chunking for metric charts

Author: pulpdrew

packages/app/src/hooks/__tests__/useChartConfig.test.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { ResponseJSON } from '@hyperdx/common-utils/dist/clickhouse';
 import { ClickhouseClient } from '@hyperdx/common-utils/dist/clickhouse/browser';
-import { ChartConfigWithOptDateRange } from '@hyperdx/common-utils/dist/types';
+import {
+  ChartConfigWithOptDateRange,
+  MetricsDataType,
+} from '@hyperdx/common-utils/dist/types';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook, waitFor } from '@testing-library/react';
 
@@ -97,6 +100,48 @@ describe('useChartConfig', () => {
       ).toEqual([undefined]);
     });
 
+    it('returns windows aligned to the granularity if the granularity is auto', () => {
+      expect(
+        getGranularityAlignedTimeWindows(
+          {
+            dateRange: [
+              new Date('2023-01-10 00:00:00'),
+              new Date('2023-01-10 01:00:00'),
+            ],
+            granularity: 'auto', // will be 1 minute
+            timestampValueExpression: 'TimestampTime',
+          } as ChartConfigWithOptDateRange,
+          [
+            30, // 30s
+            5 * 60, // 5m
+            60 * 60, // 1hr
+          ],
+        ),
+      ).toEqual([
+        {
+          dateRange: [
+            new Date('2023-01-10 00:59:00'), // Aligned to minute, the auto-inferred granularity
+            new Date('2023-01-10 01:00:00'),
+          ],
+          dateRangeEndInclusive: undefined,
+        },
+        {
+          dateRange: [
+            new Date('2023-01-10 00:54:00'),
+            new Date('2023-01-10 00:59:00'),
+          ],
+          dateRangeEndInclusive: false,
+        },
+        {
+          dateRange: [
+            new Date('2023-01-10 00:00:00'),
+            new Date('2023-01-10 00:54:00'),
+          ],
+          dateRangeEndInclusive: false,
+        },
+      ]);
+    });
+
     it('returns windows aligned to the granularity if the granularity is larger than the window size', () => {
       expect(
         getGranularityAlignedTimeWindows(
@@ -436,6 +481,81 @@ describe('useChartConfig', () => {
       });
     });
 
+    it('fetches data without chunking for metric chart configs', async () => {
+      const config: ChartConfigWithOptDateRange = {
+        select: [
+          {
+            aggFn: 'min',
+            aggCondition: '',
+            aggConditionLanguage: 'lucene',
+            valueExpression: 'Value',
+            metricName: 'system.network.io',
+            metricType: MetricsDataType.Sum,
+          },
+        ],
+        where: '',
+        whereLanguage: 'lucene',
+        granularity: '1 minute',
+        from: {
+          databaseName: 'default',
+          tableName: '',
+        },
+        timestampValueExpression: 'TimeUnix',
+        dateRange: [
+          new Date('2025-10-06T18:35:47.599Z'),
+          new Date('2025-10-10T19:35:47.599Z'),
+        ],
+        connection: 'foo',
+        metricTables: {
+          gauge: 'otel_metrics_gauge',
+          histogram: 'otel_metrics_histogram',
+          sum: 'otel_metrics_sum',
+          summary: '',
+          'exponential histogram': '',
+        },
+        limit: {
+          limit: 100000,
+        },
+      };
+
+      const mockResponse = createMockQueryResponse([
+        {
+          'count()': '71',
+          SeverityText: 'info',
+          __hdx_time_bucket: '2025-10-01T00:00:00Z',
+        },
+        {
+          'count()': '73',
+          SeverityText: 'info',
+          __hdx_time_bucket: '2025-10-02T00:00:00Z',
+        },
+      ]);
+
+      mockClickhouseClient.queryChartConfig.mockResolvedValue(mockResponse);
+
+      const { result } = renderHook(() => useQueriedChartConfig(config), {
+        wrapper,
+      });
+
+      await waitFor(() => expect(result.current.isSuccess).toBe(true));
+      await waitFor(() => expect(result.current.isFetching).toBe(false));
+
+      // Should only be called once since chunking is disabled without timestampValueExpression
+      expect(mockClickhouseClient.queryChartConfig).toHaveBeenCalledTimes(1);
+      expect(mockClickhouseClient.queryChartConfig).toHaveBeenCalledWith({
+        config,
+        metadata: expect.any(Object),
+        opts: {
+          abort_signal: expect.any(AbortSignal),
+        },
+      });
+      expect(result.current.data).toEqual({
+        data: mockResponse.data,
+        meta: mockResponse.meta,
+        rows: mockResponse.rows,
+      });
+    });
+
     it('fetches data without chunking when disableQueryChunking is true', async () => {
       const config = createMockChartConfig({
         dateRange: [

packages/app/src/hooks/useChartConfig.tsx

@@ -7,11 +7,15 @@ import {
 import { ClickhouseClient } from '@hyperdx/common-utils/dist/clickhouse/browser';
 import {
   DEFAULT_AUTO_GRANULARITY_MAX_BUCKETS,
+  isMetricChartConfig,
   isUsingGranularity,
   renderChartConfig,
 } from '@hyperdx/common-utils/dist/renderChartConfig';
 import { format } from '@hyperdx/common-utils/dist/sqlFormatter';
-import { ChartConfigWithOptDateRange } from '@hyperdx/common-utils/dist/types';
+import {
+  ChartConfigWithDateRange,
+  ChartConfigWithOptDateRange,
+} from '@hyperdx/common-utils/dist/types';
 import {
   experimental_streamedQuery as streamedQuery,
   useQuery,
@@ -46,15 +50,31 @@ type TimeWindow = {
 
 type TQueryFnData = Pick<ResponseJSON<any>, 'data' | 'meta' | 'rows'> & {};
 
-export const getGranularityAlignedTimeWindows = (
+const shouldUseChunking = (
   config: ChartConfigWithOptDateRange,
-  windowDurationsSeconds?: number[],
-): TimeWindow[] | [undefined] => {
+): config is ChartConfigWithDateRange & {
+  granularity: string;
+} => {
   // Granularity is required for chunking, otherwise we could break other group-bys.
-  if (!isUsingGranularity(config)) return [undefined];
+  if (!isUsingGranularity(config)) return false;
 
   // Date range is required for chunking, otherwise we'd have infinite chunks, or some unbounded chunk(s).
-  if (!config.dateRange) return [undefined];
+  if (!config.dateRange) return false;
+
+  // TODO: enable chunking for metric charts when we're confident chunking will not break
+  // complex metric queries.
+  if (isMetricChartConfig(config)) return false;
+
+  console.log('Chunking enabled for chart config:', config);
+
+  return true;
+};
+
+export const getGranularityAlignedTimeWindows = (
+  config: ChartConfigWithOptDateRange,
+  windowDurationsSeconds?: number[],
+): TimeWindow[] | [undefined] => {
+  if (!shouldUseChunking(config)) return [undefined];
 
   const [startDate, endDate] = config.dateRange;
   const windowsUnaligned = generateTimeWindowsDescending(
@@ -64,7 +84,7 @@ export const getGranularityAlignedTimeWindows = (
   );
 
   const granularity =
-    config.granularity === 'auto' // TODO test this
+    config.granularity === 'auto'
       ? convertDateRangeToGranularityString(
           config.dateRange,
           DEFAULT_AUTO_GRANULARITY_MAX_BUCKETS,
@@ -142,15 +162,14 @@ async function* fetchDataInChunks(
  * A hook providing data queried based on the provided chart config.
  *
  * If all of the following are true, the query will be chunked into multiple smaller queries:
- * - The config includes a date range
- * - The config includes a granularity
+ * - The config includes a dateRange, granularity, and timestampValueExpression
  * - `options.disableQueryChunking` is falsy
  *
  * For chunked queries, note the following:
- * - The config's limit, if provided, is applied to each chunk, so the total number
+ * - `config.limit`, if provided, is applied to each chunk, so the total number
  *   of rows returned may be up to `limit * number_of_chunks`.
  * - The returned data will be ordered within each chunk, and chunks will
- *   be ordered oldest-first, by the timestampValueExpression.
+ *   be ordered oldest-first, by the `timestampValueExpression`.
  */
 export function useQueriedChartConfig(
   config: ChartConfigWithOptDateRange,

packages/app/src/hooks/usePatterns.tsx

@@ -145,7 +145,7 @@ function usePatterns({
     configWithPrimaryAndPartitionKey ?? config, // `config` satisfying type, never used due to `enabled` check
     {
       enabled: configWithPrimaryAndPartitionKey != null && enabled,
-      // Disable chunking so that we get a uniform sample across the entire date range
+      // Disable chunking to ensure we get the desired sample size
       disableQueryChunking: true,
     },
   );