feat: Wire heatmap chart into dashboard editor and tile rendering

.changeset/heatmap-chart-editor-dashboard.md

@@ -0,0 +1,13 @@
+---
+'@hyperdx/app': minor
+'@hyperdx/common-utils': patch
+---
+
+feat: heatmap charts in chart editor and dashboards
+
+- Heatmap is now a selectable display type in the chart editor tabs
+- Dashboard tiles render heatmaps via the shared `DBHeatmapChart` component
+- Heatmap source picker restricted to trace sources; value/count expressions auto-populate from the source's duration expression
+- Display Settings drawer (scale, value, count) shared across search Event Deltas, chart editor, and dashboards
+- Click a dashboard heatmap tile to open Event Deltas with source, where clause, filters, and time range preserved
+- Dynamic Y-axis sizing measures formatted tick labels so long labels (e.g. "1.67min") are not clipped

packages/app/src/DBDashboardPage.tsx

@@ -32,6 +32,7 @@ import {
 } from '@hyperdx/common-utils/dist/guards';
 import {
   AlertState,
+  BuilderChartConfigWithDateRange,
   ChartConfigWithDateRange,
   DashboardContainer as DashboardContainerSchema,
   DashboardFilter,
@@ -44,6 +45,7 @@ import {
   SearchConditionLanguage,
   SourceKind,
   SQLInterval,
+  TSource,
 } from '@hyperdx/common-utils/dist/types';
 import {
   ActionIcon,
@@ -57,6 +59,8 @@ import {
   Menu,
   Modal,
   Paper,
+  Popover,
+  Portal,
   Stack,
   Text,
   Tooltip,
@@ -77,6 +81,7 @@ import {
   IconPlayerPlay,
   IconPlus,
   IconRefresh,
+  IconSearch,
   IconSquaresDiagonal,
   IconTags,
   IconTrash,
@@ -114,6 +119,9 @@ import useDashboardContainers, {
 import { calculateNextTilePosition, makeId } from '@/utils/tilePositioning';
 
 import ChartContainer from './components/charts/ChartContainer';
+import DBHeatmapChart, {
+  toHeatmapChartConfig,
+} from './components/DBHeatmapChart';
 import { DBPieChart } from './components/DBPieChart';
 import DBSqlRowTableWithSideBar from './components/DBSqlRowTableWithSidebar';
 import OnboardingModal from './components/OnboardingModal';
@@ -126,7 +134,11 @@ import { useDashboardRefresh } from './hooks/useDashboardRefresh';
 import useTileSelection from './hooks/useTileSelection';
 import { useBrandDisplayName } from './theme/ThemeProvider';
 import { parseAsJsonEncoded, parseAsStringEncoded } from './utils/queryParsers';
-import { buildTableRowSearchUrl, DEFAULT_CHART_CONFIG } from './ChartUtils';
+import {
+  buildEventsSearchUrl,
+  buildTableRowSearchUrl,
+  DEFAULT_CHART_CONFIG,
+} from './ChartUtils';
 import { useConnections } from './connection';
 import { useDashboard } from './dashboard';
 import DashboardFilters from './DashboardFilters';
@@ -149,6 +161,135 @@ import { useZIndex, ZIndexContext } from './zIndex';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
+function HeatmapTile({
+  keyPrefix,
+  chartId,
+  title,
+  toolbar,
+  queriedConfig,
+  source,
+  dateRange,
+}: {
+  keyPrefix: string;
+  chartId: string;
+  title: React.ReactNode;
+  toolbar: React.ReactNode[];
+  queriedConfig: BuilderChartConfigWithDateRange;
+  source: TSource | undefined;
+  dateRange: [Date, Date];
+}) {
+  const { heatmapConfig, scaleType } = toHeatmapChartConfig(queriedConfig);
+
+  const [clickPos, setClickPos] = useState<{ x: number; y: number } | null>(
+    null,
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const eventDeltasUrl = useMemo(() => {
+    if (!source) return null;
+    const url = buildEventsSearchUrl({
+      source,
+      config: queriedConfig,
+      dateRange,
+    });
+    if (!url) return null;
+    const separator = url.includes('?') ? '&' : '?';
+    return `${url}${separator}mode=delta`;
+  }, [source, queriedConfig, dateRange]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!eventDeltasUrl) return;
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      setClickPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    },
+    [eventDeltasUrl],
+  );
+
+  const dismiss = useCallback(() => setClickPos(null), []);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{ position: 'relative', width: '100%', height: '100%' }}
+      onClick={handleClick}
+    >
+      <DBHeatmapChart
+        key={`${keyPrefix}-${chartId}`}
+        title={title}
+        toolbarPrefix={toolbar}
+        config={heatmapConfig}
+        scaleType={scaleType}
+        showLegend
+      />
+      {clickPos != null && eventDeltasUrl != null && (
+        <>
+          <Portal>
+            <div
+              style={{
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 199,
+              }}
+              onClick={e => {
+                e.stopPropagation();
+                e.preventDefault();
+                dismiss();
+              }}
+              onMouseDown={e => e.stopPropagation()}
+            />
+          </Portal>
+          <Popover
+            opened
+            onChange={opened => {
+              if (!opened) dismiss();
+            }}
+            position="bottom-start"
+            offset={4}
+            withinPortal
+            closeOnEscape
+            withArrow
+            shadow="md"
+          >
+            <Popover.Target>
+              <div
+                style={{
+                  position: 'absolute',
+                  left: clickPos.x,
+                  top: clickPos.y,
+                  width: 1,
+                  height: 1,
+                  pointerEvents: 'none',
+                }}
+              />
+            </Popover.Target>
+            <Popover.Dropdown
+              p="xs"
+              onClick={e => e.stopPropagation()}
+              onMouseDown={e => e.stopPropagation()}
+            >
+              <Link
+                data-testid="heatmap-view-event-deltas-link"
+                href={eventDeltasUrl}
+                onClick={dismiss}
+              >
+                <Group gap="xs">
+                  <IconSearch size={16} />
+                  View in Event Deltas
+                </Group>
+              </Link>
+            </Popover.Dropdown>
+          </Popover>
+        </>
+      )}
+    </div>
+  );
+}
+
 const ReactGridLayout = WidthProvider(RGL);
 
 type MoveTarget = {
@@ -658,6 +799,18 @@ const Tile = forwardRef(
                     config={queriedConfig}
                   />
                 )}
+                {queriedConfig?.displayType === DisplayType.Heatmap &&
+                  isBuilderChartConfig(queriedConfig) && (
+                    <HeatmapTile
+                      keyPrefix={keyPrefix}
+                      chartId={chart.id}
+                      title={title}
+                      toolbar={toolbar}
+                      queriedConfig={queriedConfig}
+                      source={source}
+                      dateRange={dateRange}
+                    />
+                  )}
                 {effectiveMarkdownConfig?.displayType ===
                   DisplayType.Markdown &&
                   'markdown' in effectiveMarkdownConfig && (
@@ -873,6 +1026,7 @@ const EditTileModal = ({
             onClose={handleClose}
             onDirtyChange={setHasUnsavedChanges}
             isDashboardForm
+            autoRun
           />
         </ZIndexContext.Provider>
       )}

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

@@ -7,6 +7,7 @@ import * as utils from '../utils';
 import {
   formatAttributeClause,
   formatDurationMs,
+  formatDurationMsCompact,
   formatNumber,
   getAllMetricTables,
   getMetricTableName,
@@ -1123,3 +1124,49 @@ describe('mapKeyBy', () => {
     expect(result.get('a')).toBe(data.at(1));
   });
 });
+
+describe('formatDurationMsCompact', () => {
+  it('returns 0 for zero', () => {
+    expect(formatDurationMsCompact(0)).toBe('0');
+  });
+
+  it('formats negative values', () => {
+    expect(formatDurationMsCompact(-5)).toBe('-5ms');
+  });
+
+  it('formats nanoseconds (< 0.001 ms)', () => {
+    expect(formatDurationMsCompact(0.0005)).toBe('500ns');
+    expect(formatDurationMsCompact(0.00012)).toBe('120ns');
+  });
+
+  it('formats microseconds (< 1 ms)', () => {
+    expect(formatDurationMsCompact(0.005)).toBe('5µs');
+    expect(formatDurationMsCompact(0.5)).toBe('500µs');
+    expect(formatDurationMsCompact(0.123)).toBe('123µs');
+  });
+
+  it('formats milliseconds (< 1000 ms)', () => {
+    expect(formatDurationMsCompact(5)).toBe('5ms');
+    expect(formatDurationMsCompact(5.67)).toBe('5.7ms');
+    expect(formatDurationMsCompact(100)).toBe('100ms');
+    expect(formatDurationMsCompact(999)).toBe('999ms');
+  });
+
+  it('formats seconds (< 2 min)', () => {
+    expect(formatDurationMsCompact(1000)).toBe('1s');
+    expect(formatDurationMsCompact(5432)).toBe('5.43s');
+    expect(formatDurationMsCompact(60_000)).toBe('60s');
+    expect(formatDurationMsCompact(119_999)).toBe('120s');
+  });
+
+  it('formats minutes (< 1 hour)', () => {
+    expect(formatDurationMsCompact(120_000)).toBe('2m');
+    expect(formatDurationMsCompact(300_000)).toBe('5m');
+    expect(formatDurationMsCompact(3_599_999)).toBe('60m');
+  });
+
+  it('formats hours (>= 1 hour)', () => {
+    expect(formatDurationMsCompact(3_600_000)).toBe('1h');
+    expect(formatDurationMsCompact(7_200_000)).toBe('2h');
+  });
+});