fix: colors display for traces (#860)

Adds a groupby for traces based on statusCodeExpression akin to severityTextExpression for logs. Colors based on message

Author: knudtty

.changeset/empty-balloons-sin.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: color display on search page for traces

packages/app/src/ChartUtils.tsx

@@ -14,6 +14,7 @@ import {
   DisplayType,
   MetricsDataType as MetricsDataTypeV2,
   SavedChartConfig,
+  SourceKind,
   SQLInterval,
   TSource,
 } from '@hyperdx/common-utils/dist/types';
@@ -507,8 +508,12 @@ export function formatResponseForTimeChart({
 
       let color: string | undefined = undefined;
       if (
+        source &&
         groupColumns.length === 1 &&
-        groupColumns[0].name === source?.severityTextExpression
+        groupColumns[0].name ===
+          (source.kind === SourceKind.Log
+            ? source.severityTextExpression
+            : source.statusCodeExpression)
       ) {
         color = logLevelColor(row[groupColumns[0].name]);
       }

packages/app/src/DBSearchPage.tsx

@@ -25,6 +25,7 @@ import {
   ChartConfigWithDateRange,
   DisplayType,
   Filter,
+  SourceKind,
 } from '@hyperdx/common-utils/dist/types';
 import { splitAndTrimWithBracket } from '@hyperdx/common-utils/dist/utils';
 import {
@@ -955,6 +956,16 @@ function DBSearchPage() {
       return undefined;
     }
 
+    const variableConfig: any = {};
+    switch (searchedSource?.kind) {
+      case SourceKind.Log:
+        variableConfig.groupBy = searchedSource?.severityTextExpression;
+        break;
+      case SourceKind.Trace:
+        variableConfig.groupBy = searchedSource?.statusCodeExpression;
+        break;
+    }
+
     return {
       ...chartConfig,
       select: [
@@ -968,8 +979,8 @@ function DBSearchPage() {
       granularity: 'auto',
       dateRange: searchedTimeRange,
       displayType: DisplayType.StackedBar,
-      groupBy: searchedSource?.severityTextExpression,
       with: aliasWith,
+      ...variableConfig,
     };
   }, [chartConfig, searchedSource, aliasWith, searchedTimeRange]);