feat: highlight logs green in trace waterfall

Author: karl-power

packages/app/src/components/DBTraceWaterfallChart.tsx

@@ -43,6 +43,8 @@ import { useFormatTime } from '@/useFormatTime';
 import {
   getChartColorError,
   getChartColorErrorHighlight,
+  getChartColorSuccess,
+  getChartColorSuccessHighlight,
   getChartColorWarning,
   getChartColorWarningHighlight,
 } from '@/utils';
@@ -87,14 +89,24 @@ function barColor(condition: {
   isError: boolean;
   isWarn: boolean;
   isHighlighted: boolean;
+  type: string | undefined;
 }) {
-  const { isError, isWarn, isHighlighted } = condition;
+  const { isError, isWarn, isHighlighted, type } = condition;
+
   if (isError)
     return isHighlighted ? getChartColorErrorHighlight() : getChartColorError();
+
   if (isWarn)
     return isHighlighted
       ? getChartColorWarningHighlight()
       : getChartColorWarning();
+
+  if (type === SourceKind.Log) {
+    return isHighlighted
+      ? getChartColorSuccessHighlight()
+      : getChartColorSuccess();
+  }
+
   return isHighlighted ? '#A9AFB7' : '#6A7077';
 }
 
@@ -802,7 +814,8 @@ export function DBTraceWaterfallChartContainer({
           start,
           end,
           tooltip: `${displayText} ${tookMs >= 0 ? `took ${tookMs.toFixed(4)}ms` : ''} ${status ? `| Status: ${status}` : ''}${!isNaN(startOffset) ? ` | Started at ${formatTime(new Date(startOffset), { format: 'withMs' })}` : ''}`,
-          color: barColor({ isError, isWarn, isHighlighted }),
+          color: 'var(--color-text-inverted)',
+          backgroundColor: barColor({ isError, isWarn, isHighlighted, type }),
           body: <span>{displayText}</span>,
           minWidthPerc: 1,
           isError,

packages/app/src/components/TimelineChart/TimelineChart.tsx

@@ -275,14 +275,6 @@ export const TimelineChart = memo(function ({
                   events={row.events}
                   height={rowHeight}
                   maxVal={maxVal}
-                  eventStyles={(event: TTimelineEvent) => ({
-                    borderRadius: 2,
-                    fontSize: rowHeight * 0.5,
-                    backgroundColor: event.isError
-                      ? 'var(--color-bg-danger)'
-                      : 'var(--color-bg-inverted)',
-                    color: 'var(--color-text-inverted)',
-                  })}
                   scale={scale}
                   offset={offset}
                 />

packages/app/src/components/TimelineChart/TimelineChartRowEvents.tsx

@@ -12,21 +12,19 @@ export type TTimelineEvent = {
   end: number;
   tooltip: string;
   color: string;
+  backgroundColor: string;
   body: React.ReactNode;
   minWidthPerc?: number;
   isError?: boolean;
   markers?: TTimelineSpanEventMarker[];
 };
 
 type TimelineChartRowProps = {
-  events: TTimelineEvent[] | undefined;
+  events: TTimelineEvent[];
   maxVal: number;
   height: number;
   scale: number;
   offset: number;
-  eventStyles?:
-    | React.CSSProperties
-    | ((event: TTimelineEvent) => React.CSSProperties);
   onEventHover?: (eventId: string) => void;
   onEventClick?: (event: TTimelineEvent) => void;
 };
@@ -35,7 +33,6 @@ export const TimelineChartRowEvents = memo(function ({
   events,
   maxVal,
   height,
-  eventStyles,
   onEventHover,
   scale,
   offset,
@@ -48,7 +45,7 @@ export const TimelineChartRowEvents = memo(function ({
       <div
         style={{ marginRight: `${(-1 * offset * scale).toFixed(6)}%` }}
       ></div>
-      {(events ?? []).map((e: TTimelineEvent, i, arr) => {
+      {events.map((e: TTimelineEvent, i, arr) => {
         const minWidth = (e.minWidthPerc ?? 0) / 100;
         const lastEvent = arr[i - 1];
         const lastEventMinEnd =
@@ -79,14 +76,14 @@ export const TimelineChartRowEvents = memo(function ({
               className="d-flex align-items-center h-100 cursor-pointer text-truncate hover-opacity"
               style={{
                 userSelect: 'none',
-                backgroundColor: e.color,
                 minWidth: `${percWidth.toFixed(6)}%`,
                 width: `${percWidth.toFixed(6)}%`,
                 marginLeft: `${percMarginLeft.toFixed(6)}%`,
                 position: 'relative',
-                ...(typeof eventStyles === 'function'
-                  ? eventStyles(e)
-                  : eventStyles),
+                borderRadius: 2,
+                fontSize: height * 0.5,
+                color: e.color,
+                backgroundColor: e.backgroundColor,
               }}
             >
               <div style={{ margin: 'auto' }} className="px-2">

packages/app/src/theme/themes/hyperdx/_tokens.scss

@@ -103,8 +103,9 @@
   --color-chart-error: #ff725c; /* Red */
 
   /* Chart Semantic Colors - Highlighted (for hover/selection states) */
-  --color-chart-error-highlight: #ffa090;
+  --color-chart-success-highlight: #80d9b3;
   --color-chart-warning-highlight: #f5c94d;
+  --color-chart-error-highlight: #ffa090;
 
   /* Mantine Overrides */
   --mantine-color-body: var(--color-bg-body) !important;

packages/app/src/utils.ts

@@ -420,6 +420,7 @@ export const CHART_PALETTE = {
   brown: '#9c6b4e',
   gray: '#9498a0',
   // Highlighted variants (lighter shades for hover/selection states)
+  greenHighlight: '#80d9b3',
   redHighlight: '#ffa090',
   orangeHighlight: '#f5c94d',
 } as const;
@@ -438,6 +439,7 @@ export const CLICKSTACK_CHART_PALETTE = {
   brown: '#9c6b4e',
   gray: '#9498a0',
   // Highlighted variants (lighter shades for hover/selection states)
+  greenHighlight: '#80d9b3',
   redHighlight: '#ffa090',
   orangeHighlight: '#f5c94d',
 } as const;
@@ -588,6 +590,14 @@ export function getChartColorError(): string {
 }
 
 // Highlighted variants (theme-aware)
+export function getChartColorSuccessHighlight(): string {
+  return getSemanticChartColor(
+    '--color-chart-success-highlight',
+    CHART_PALETTE.greenHighlight,
+    CLICKSTACK_CHART_PALETTE.greenHighlight,
+  );
+}
+
 export function getChartColorErrorHighlight(): string {
   return getSemanticChartColor(
     '--color-chart-error-highlight',