fix: Ensure displayed configs match queried configs in chart explorer

Author: pulpdrew

.changeset/pretty-donkeys-turn.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: Ensure displayed configs match queried configs in chart explorer

packages/app/src/ChartUtils.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { add } from 'date-fns';
+import { omit } from 'lodash';
 import SqlString from 'sqlstring';
 import { z } from 'zod';
 import {
@@ -13,6 +14,7 @@ import { isMetricChartConfig } from '@hyperdx/common-utils/dist/core/renderChart
 import {
   AggregateFunction as AggFnV2,
   ChartConfigWithDateRange,
+  ChartConfigWithOptTimestamp,
   DisplayType,
   Filter,
   MetricsDataType as MetricsDataTypeV2,
@@ -139,15 +141,20 @@ export const isGranularity = (value: string): value is Granularity => {
   return Object.values(Granularity).includes(value as Granularity);
 };
 
-export function useTimeChartSettings(chartConfig: ChartConfigWithDateRange) {
-  const autoGranularity = useMemo(() => {
+export function convertTimeChartAutoGranularity(
+  chartConfig: ChartConfigWithDateRange,
+) {
+  if (chartConfig.granularity === 'auto' || chartConfig.granularity == null) {
     return convertDateRangeToGranularityString(chartConfig.dateRange, 80);
-  }, [chartConfig.dateRange]);
+  }
 
-  const granularity =
-    chartConfig.granularity === 'auto' || chartConfig.granularity == null
-      ? autoGranularity
-      : chartConfig.granularity;
+  return chartConfig.granularity;
+}
+
+export function useTimeChartSettings(chartConfig: ChartConfigWithDateRange) {
+  const granularity = useMemo(() => {
+    return convertTimeChartAutoGranularity(chartConfig);
+  }, [chartConfig]);
 
   return {
     displayType: chartConfig.displayType,
@@ -1149,3 +1156,42 @@ export function buildTableRowSearchUrl({
     valueRangeFilter,
   });
 }
+
+export function convertToTimeChartConfig(config: ChartConfigWithDateRange) {
+  const granularity = convertTimeChartAutoGranularity(config);
+
+  return {
+    ...config,
+    granularity,
+    limit: { limit: 100000 },
+  };
+}
+
+export function convertToNumberChartConfig(
+  config: ChartConfigWithDateRange,
+): ChartConfigWithOptTimestamp {
+  return omit(config, ['granularity', 'groupBy']);
+}
+
+export function convertToTableChartConfig(
+  config: ChartConfigWithOptTimestamp,
+): ChartConfigWithOptTimestamp {
+  const convertedConfig = omit(config, ['granularity']);
+
+  // Set a default limit if not already set
+  if (!convertedConfig.limit) {
+    convertedConfig.limit = { limit: 200 };
+  }
+
+  // Set a default orderBy if groupBy is set but orderBy is not,
+  // so that the set of rows within the limit is stable.
+  if (
+    convertedConfig.groupBy &&
+    typeof convertedConfig.groupBy === 'string' &&
+    !convertedConfig.orderBy
+  ) {
+    convertedConfig.orderBy = convertedConfig.groupBy;
+  }
+
+  return convertedConfig;
+}

packages/app/src/__tests__/ChartUtils.test.ts

@@ -1,6 +1,15 @@
-import { SourceKind, TSource } from '@hyperdx/common-utils/dist/types';
+import {
+  ChartConfigWithDateRange,
+  SourceKind,
+  TSource,
+} from '@hyperdx/common-utils/dist/types';
 
-import { formatResponseForTimeChart } from '@/ChartUtils';
+import {
+  convertToNumberChartConfig,
+  convertToTableChartConfig,
+  convertToTimeChartConfig,
+  formatResponseForTimeChart,
+} from '@/ChartUtils';
 
 describe('ChartUtils', () => {
   describe('formatResponseForTimeChart', () => {
@@ -529,4 +538,112 @@ describe('ChartUtils', () => {
       ]);
     });
   });
+
+  describe('convertToTimeChartConfig', () => {
+    it('should set granularity when granularity is auto', () => {
+      const config = {
+        granularity: 'auto',
+        dateRange: [
+          new Date('2025-11-26T00:00:00Z'),
+          new Date('2025-11-27T00:00:00Z'),
+        ],
+      } as ChartConfigWithDateRange;
+
+      const granularityFromFunction =
+        convertToTimeChartConfig(config).granularity;
+
+      expect(granularityFromFunction).toBe('30 minute');
+    });
+
+    it('should set granularity when granularity is undefined', () => {
+      const config = {
+        dateRange: [
+          new Date('2025-11-26T00:00:00Z'),
+          new Date('2025-11-27T00:00:00Z'),
+        ],
+      } as ChartConfigWithDateRange;
+
+      const granularityFromFunction =
+        convertToTimeChartConfig(config).granularity;
+
+      expect(granularityFromFunction).toBe('30 minute');
+    });
+
+    it('should retain the specified granularity when not auto', () => {
+      const config = {
+        granularity: '5 minute',
+        dateRange: [
+          new Date('2025-11-26T00:00:00Z'),
+          new Date('2025-11-27T00:00:00Z'),
+        ],
+      } as ChartConfigWithDateRange;
+
+      const granularityFromFunction =
+        convertToTimeChartConfig(config).granularity;
+
+      expect(granularityFromFunction).toBe('5 minute');
+    });
+  });
+
+  describe('convertToNumberChartConfig', () => {
+    it('should remove granularity and groupBy from the config', () => {
+      const config = {
+        granularity: '5 minute',
+        groupBy: 'ServiceName',
+        dateRange: [
+          new Date('2025-11-26T00:00:00Z'),
+          new Date('2025-11-27T00:00:00Z'),
+        ],
+      } as ChartConfigWithDateRange;
+
+      const convertedConfig = convertToNumberChartConfig(config);
+
+      expect(convertedConfig.granularity).toBeUndefined();
+      expect(convertedConfig.groupBy).toBeUndefined();
+    });
+  });
+
+  describe('convertToTableChartConfig', () => {
+    it('should remove granularity from the config', () => {
+      const config = {
+        granularity: '5 minute',
+        dateRange: [
+          new Date('2025-11-26T00:00:00Z'),
+          new Date('2025-11-27T00:00:00Z'),
+        ],
+      } as ChartConfigWithDateRange;
+
+      const convertedConfig = convertToTableChartConfig(config);
+
+      expect(convertedConfig.granularity).toBeUndefined();
+    });
+
+    it('should apply a default sort if none is provided', () => {
+      const config = {
+        groupBy: 'ServiceName',
+        dateRange: [
+          new Date('2025-11-26T00:00:00Z'),
+          new Date('2025-11-27T00:00:00Z'),
+        ],
+      } as ChartConfigWithDateRange;
+
+      const convertedConfig = convertToTableChartConfig(config);
+
+      expect(convertedConfig.orderBy).toEqual('ServiceName');
+    });
+
+    it('should apply a default limit if none is provided', () => {
+      const config = {
+        groupBy: 'ServiceName',
+        dateRange: [
+          new Date('2025-11-26T00:00:00Z'),
+          new Date('2025-11-27T00:00:00Z'),
+        ],
+      } as ChartConfigWithDateRange;
+
+      const convertedConfig = convertToTableChartConfig(config);
+
+      expect(convertedConfig.limit).toEqual({ limit: 200 });
+    });
+  });
 });

packages/app/src/components/ChartSQLPreview.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { sql } from '@codemirror/lang-sql';
 import { format } from '@hyperdx/common-utils/dist/sqlFormatter';
-import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
+import { ChartConfigWithOptDateRange } from '@hyperdx/common-utils/dist/types';
 import { Button, Paper } from '@mantine/core';
 import { IconCheck, IconCopy } from '@tabler/icons-react';
 import CodeMirror from '@uiw/react-codemirror';
@@ -87,7 +87,7 @@ export function SQLPreview({
 export default function ChartSQLPreview({
   config,
 }: {
-  config: ChartConfigWithDateRange;
+  config: ChartConfigWithOptDateRange;
 }) {
   const { data } = useRenderedSqlChartConfig(config);