Event Deltas Heatmap Customization (#1246)

Introduces the ability to edit the y, count, and group by values on the search event deltas heatmap allowing for deeper analysis

https://github.com/user-attachments/assets/1f4d7ca2-86be-424a-84de-23eccaf02a68

Fixes HDX-2422

Author: brandon-pereira

.changeset/many-donkeys-help.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Add ability to customize event deltas heat map y, count, and grouping attributes

packages/app/src/ChartUtils.tsx

@@ -385,6 +385,23 @@ export function timeBucketByGranularity(
   return buckets;
 }
 
+export const isAggregateFunction = (value: string) => {
+  const fns = [
+    'count',
+    'countIf',
+    'countDistinct',
+    'sum',
+    'avg',
+    'distinct',
+    'min',
+    'max',
+    'quantile',
+    'any',
+    'none',
+  ];
+  return fns.some(fn => value.includes(fn + '('));
+};
+
 export const INTEGER_NUMBER_FORMAT: NumberFormat = {
   factor: 1,
   output: 'number',

packages/app/src/DBSearchPage.tsx

@@ -43,6 +43,7 @@ import {
   Flex,
   Grid,
   Group,
+  Input,
   Menu,
   Modal,
   Paper,
@@ -60,8 +61,6 @@ import { SortingState } from '@tanstack/react-table';
 import CodeMirror from '@uiw/react-codemirror';
 
 import { ContactSupportText } from '@/components/ContactSupportText';
-import DBDeltaChart from '@/components/DBDeltaChart';
-import DBHeatmapChart from '@/components/DBHeatmapChart';
 import { DBSearchPageFilters } from '@/components/DBSearchPageFilters';
 import { DBTimeChart } from '@/components/DBTimeChart';
 import { ErrorBoundary } from '@/components/ErrorBoundary';
@@ -88,7 +87,6 @@ import {
 import { useSearchPageFilterState } from '@/searchFilters';
 import SearchInputV2 from '@/SearchInputV2';
 import {
-  getDurationMsExpression,
   getFirstTimestampValueExpression,
   useSource,
   useSources,
@@ -99,6 +97,7 @@ import { QUERY_LOCAL_STORAGE, useLocalStorage, usePrevious } from '@/utils';
 import { SQLPreview } from './components/ChartSQLPreview';
 import DBSqlRowTableWithSideBar from './components/DBSqlRowTableWithSidebar';
 import PatternTable from './components/PatternTable';
+import { DBSearchHeatmapChart } from './components/Search/DBSearchHeatmapChart';
 import SourceSchemaPreview from './components/SourceSchemaPreview';
 import { useTableMetadata } from './hooks/useMetadata';
 import { useSqlSuggestions } from './hooks/useSqlSuggestions';
@@ -1583,57 +1582,15 @@ function DBSearchPage() {
                   </Flex>
                 )}
               {analysisMode === 'delta' && searchedSource != null && (
-                <Flex direction="column" w="100%">
-                  <div
-                    style={{ minHeight: 210, maxHeight: 210, width: '100%' }}
-                  >
-                    <DBHeatmapChart
-                      config={{
-                        ...chartConfig,
-                        select: [
-                          {
-                            aggFn: 'heatmap',
-                            valueExpression:
-                              getDurationMsExpression(searchedSource),
-                          },
-                        ],
-                        dateRange: searchedTimeRange,
-                        displayType: DisplayType.Heatmap,
-                        granularity: 'auto',
-                        with: aliasWith,
-                      }}
-                      enabled={isReady}
-                      onFilter={(xMin, xMax, yMin, yMax) => {
-                        setOutlierSqlCondition(
-                          [
-                            `${searchedSource.durationExpression} >= ${yMin} * 1e${(searchedSource.durationPrecision ?? 9) - 3}`,
-                            `${searchedSource.durationExpression} <= ${yMax} * 1e${(searchedSource.durationPrecision ?? 9) - 3}`,
-                            `${getFirstTimestampValueExpression(chartConfig.timestampValueExpression)} >= ${xMin}`,
-                            `${getFirstTimestampValueExpression(chartConfig.timestampValueExpression)} <= ${xMax}`,
-                          ].join(' AND '),
-                        );
-                      }}
-                    />
-                  </div>
-                  {outlierSqlCondition ? (
-                    <DBDeltaChart
-                      config={{
-                        ...chartConfig,
-                        dateRange: searchedTimeRange,
-                      }}
-                      outlierSqlCondition={outlierSqlCondition ?? ''}
-                    />
-                  ) : (
-                    <Paper shadow="xs" p="xl" h="100%">
-                      <Center mih={100} h="100%">
-                        <Text size="sm" c="gray.4">
-                          Please highlight an outlier range in the heatmap to
-                          view the delta chart.
-                        </Text>
-                      </Center>
-                    </Paper>
-                  )}
-                </Flex>
+                <DBSearchHeatmapChart
+                  chartConfig={{
+                    ...chartConfig,
+                    dateRange: searchedTimeRange,
+                    with: aliasWith,
+                  }}
+                  isReady={isReady}
+                  source={searchedSource}
+                />
               )}
               <div style={{ display: 'flex', flexDirection: 'column' }}>
                 {analysisMode === 'results' &&

packages/app/src/components/DBDeltaChart.tsx

@@ -334,7 +334,12 @@ export default function DBDeltaChart({
       const { percentageOccurences: inlierValueOccurences } =
         getPropertyStatistics(inlierData?.data ?? []);
 
-      const sortedProperties = Array.from(outlierValueOccurences.keys())
+      // Get all the unique keys from both maps, and process them to get the merged arrays
+      const uniqueKeys = new Set([
+        ...outlierValueOccurences.keys(),
+        ...inlierValueOccurences.keys(),
+      ]);
+      const sortedProperties = Array.from(uniqueKeys)
         .map(key => {
           const inlierCount =
             inlierValueOccurences.get(key) ?? new Map<string, number>();