feat: Wire heatmap chart into dashboard editor and tile rendering

packages/app/src/DBDashboardPage.tsx

@@ -32,6 +32,7 @@ import {
 } from '@hyperdx/common-utils/dist/guards';
 import {
   AlertState,
+  BuilderChartConfigWithDateRange,
   ChartConfigWithDateRange,
   DashboardContainer,
   DashboardFilter,
@@ -101,6 +102,9 @@ import {
 } from '@/dashboard';
 
 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';
@@ -135,6 +139,31 @@ 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,
+}: {
+  keyPrefix: string;
+  chartId: string;
+  title: React.ReactNode;
+  toolbar: React.ReactNode[];
+  queriedConfig: BuilderChartConfigWithDateRange;
+}) {
+  const { heatmapConfig, scaleType } = toHeatmapChartConfig(queriedConfig);
+  return (
+    <DBHeatmapChart
+      key={`${keyPrefix}-${chartId}`}
+      title={title}
+      toolbarPrefix={toolbar}
+      config={heatmapConfig}
+      scaleType={scaleType}
+    />
+  );
+}
+
 const makeId = () => Math.floor(100000000 * Math.random()).toString(36);
 
 const ReactGridLayout = WidthProvider(RGL);
@@ -599,6 +628,16 @@ const Tile = forwardRef(
                     config={queriedConfig}
                   />
                 )}
+                {queriedConfig?.displayType === DisplayType.Heatmap &&
+                  isBuilderChartConfig(queriedConfig) && (
+                    <HeatmapTile
+                      keyPrefix={keyPrefix}
+                      chartId={chart.id}
+                      title={title}
+                      toolbar={toolbar}
+                      queriedConfig={queriedConfig}
+                    />
+                  )}
                 {effectiveMarkdownConfig?.displayType ===
                   DisplayType.Markdown &&
                   'markdown' in effectiveMarkdownConfig && (
@@ -789,6 +828,7 @@ const EditTileModal = ({
             onClose={handleClose}
             onDirtyChange={setHasUnsavedChanges}
             isDashboardForm
+            autoRun
           />
         </ZIndexContext.Provider>
       )}

packages/app/src/components/ChartEditor/utils.ts

@@ -266,12 +266,13 @@ export const validateChartForm = (
     }
   }
 
-  // Validate number and pie charts only have one series
+  // Validate number, pie, and heatmap charts only have one series
   if (
     !isRawSqlChart &&
     Array.isArray(form.series) &&
     (form.displayType === DisplayType.Number ||
-      form.displayType === DisplayType.Pie) &&
+      form.displayType === DisplayType.Pie ||
+      form.displayType === DisplayType.Heatmap) &&
     form.series.length > 1
   ) {
     errors.push({
@@ -280,6 +281,20 @@ export const validateChartForm = (
     });
   }
 
+  // Validate heatmap requires a value expression
+  if (
+    !isRawSqlChart &&
+    form.displayType === DisplayType.Heatmap &&
+    Array.isArray(form.series) &&
+    form.series.length > 0 &&
+    !form.series[0]?.valueExpression
+  ) {
+    errors.push({
+      path: `series.0.valueExpression`,
+      message: 'Value expression is required for heatmap charts',
+    });
+  }
+
   for (const error of errors) {
     console.warn(`Validation error in field ${error.path}: ${error.message}`);
     setError(error.path, {

packages/app/src/components/DBEditTimeChartForm/ChartEditorControls.tsx

@@ -29,6 +29,7 @@ import { IS_LOCAL_MODE } from '@/config';
 import { DEFAULT_TILE_ALERT } from '@/utils/alerts';
 
 import { ChartSeriesEditor } from './ChartSeriesEditor';
+import { HeatmapSeriesEditor } from './HeatmapSeriesEditor';
 import { TileAlertEditor } from './TileAlertEditor';
 
 type ChartEditorControlsProps = {
@@ -56,6 +57,7 @@ type ChartEditorControlsProps = {
   chartConfigForExplanations?: ChartConfigWithOptTimestamp;
   onSubmit: (suppressErrorNotification?: boolean) => void;
   openDisplaySettings: () => void;
+  openHeatmapSettings?: () => void;
 };
 
 export function ChartEditorControls({
@@ -83,6 +85,7 @@ export function ChartEditorControls({
   chartConfigForExplanations,
   onSubmit,
   openDisplaySettings,
+  openHeatmapSettings,
 }: ChartEditorControlsProps) {
   return (
     <>
@@ -96,6 +99,11 @@ export function ChartEditorControls({
             control={control}
             name="source"
             data-testid="source-selector"
+            allowedSourceKinds={
+              displayType === DisplayType.Heatmap
+                ? [SourceKind.Trace]
+                : undefined
+            }
             sourceSchemaPreview={
               <SourceSchemaPreview source={tableSource} variant="text" />
             }
@@ -113,7 +121,15 @@ export function ChartEditorControls({
             )}
         </Group>
       </Flex>
-      {displayType !== DisplayType.Search && Array.isArray(select) ? (
+      {displayType === DisplayType.Heatmap && Array.isArray(select) ? (
+        <HeatmapSeriesEditor
+          control={control}
+          setValue={setValue}
+          tableSource={tableSource}
+          onSubmit={onSubmit}
+          onOpenDisplaySettings={openHeatmapSettings ?? openDisplaySettings}
+        />
+      ) : displayType !== DisplayType.Search && Array.isArray(select) ? (
         <>
           {fields.map((field, index) => (
             <ChartSeriesEditor
@@ -208,7 +224,8 @@ export function ChartEditorControls({
           <Flex mt={4} align="center" justify="space-between">
             <Group gap="xs">
               {displayType !== DisplayType.Number &&
-                displayType !== DisplayType.Pie && (
+                displayType !== DisplayType.Pie &&
+                displayType !== DisplayType.Heatmap && (
                   <Button
                     variant="subtle"
                     size="sm"

packages/app/src/components/DBEditTimeChartForm/ChartPreviewPanel.tsx

@@ -1,8 +1,10 @@
 import { useCallback, useMemo, useState } from 'react';
 import { isBuilderChartConfig } from '@hyperdx/common-utils/dist/guards';
 import {
+  BuilderChartConfigWithDateRange,
   ChartConfigWithDateRange,
   ChartConfigWithOptTimestamp,
+  DisplayType,
   SourceKind,
   TSource,
 } from '@hyperdx/common-utils/dist/types';
@@ -14,6 +16,9 @@ import { buildTableRowSearchUrl } from '@/ChartUtils';
 import { getAlertReferenceLines } from '@/components/Alerts';
 import { ChartEditorFormState } from '@/components/ChartEditor/types';
 import ChartSQLPreview from '@/components/ChartSQLPreview';
+import DBHeatmapChart, {
+  toHeatmapChartConfig,
+} from '@/components/DBHeatmapChart';
 import DBNumberChart from '@/components/DBNumberChart';
 import { DBPieChart } from '@/components/DBPieChart';
 import DBSqlRowTableWithSideBar from '@/components/DBSqlRowTableWithSidebar';
@@ -28,6 +33,19 @@ import {
 
 import { buildSampleEventsConfig, isQueryReady } from './utils';
 
+function HeatmapPreview({
+  config,
+}: {
+  config: BuilderChartConfigWithDateRange;
+}) {
+  const { heatmapConfig, scaleType } = toHeatmapChartConfig(config);
+  return (
+    <div className="flex-grow-1 d-flex flex-column" style={{ height: 400 }}>
+      <DBHeatmapChart config={heatmapConfig} scaleType={scaleType} />
+    </div>
+  );
+}
+
 type ChartPreviewPanelProps = {
   queriedConfig?: ChartConfigWithDateRange;
   tableSource?: TSource;
@@ -159,6 +177,10 @@ export function ChartPreviewPanel({
           />
         </div>
       )}
+      {queryReady &&
+        queriedConfig != null &&
+        isBuilderChartConfig(queriedConfig) &&
+        activeTab === 'heatmap' && <HeatmapPreview config={queriedConfig} />}
       {queryReady &&
         tableSource &&
         queriedConfig != null &&