Skip to content

Commit ced90ae

Browse files
karl-powerkarl-power
authored
feat: highlight logs green in trace waterfall (#1819)
Closes HDX-3526 ## Changes - Colors logs events in the trace waterfall view green. - Adds a new `greenHighlight` color that applies the same lightening transformation as the other highlight colors. - Makes use of the `barColor` util DBTraceWaterfallChart again that was being overwritten. ## Screenshots <img width="1323" height="701" alt="Screenshot 2026-02-27 at 13 43 26" src="https://github.com/user-attachments/assets/f0a55693-27b5-4020-9e06-8d0ddbd9cb21" /> <img width="1323" height="701" alt="Screenshot 2026-02-27 at 13 42 45" src="https://github.com/user-attachments/assets/c3bac503-027c-4724-aad9-f28404e5199f" />
1 parent f280256 commit ced90ae

6 files changed

Lines changed: 40 additions & 24 deletions

File tree

‎packages/app/src/components/DBTraceWaterfallChart.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ import { useFormatTime } from '@/useFormatTime';
4343
import {
4444
getChartColorError,
4545
getChartColorErrorHighlight,
46+
getChartColorSuccess,
47+
getChartColorSuccessHighlight,
4648
getChartColorWarning,
4749
getChartColorWarningHighlight,
4850
} from '@/utils';
@@ -87,14 +89,24 @@ function barColor(condition: {
8789
isError: boolean;
8890
isWarn: boolean;
8991
isHighlighted: boolean;
92+
type: string | undefined;
9093
}) {
91-
const { isError, isWarn, isHighlighted } = condition;
94+
const { isError, isWarn, isHighlighted, type } = condition;
95+
9296
if (isError)
9397
return isHighlighted ? getChartColorErrorHighlight() : getChartColorError();
98+
9499
if (isWarn)
95100
return isHighlighted
96101
? getChartColorWarningHighlight()
97102
: getChartColorWarning();
103+
104+
if (type === SourceKind.Log) {
105+
return isHighlighted
106+
? getChartColorSuccessHighlight()
107+
: getChartColorSuccess();
108+
}
109+
98110
return isHighlighted ? '#A9AFB7' : '#6A7077';
99111
}
100112

@@ -802,7 +814,8 @@ export function DBTraceWaterfallChartContainer({
802814
start,
803815
end,
804816
tooltip: `${displayText} ${tookMs >= 0 ? `took ${tookMs.toFixed(4)}ms` : ''} ${status ? `| Status: ${status}` : ''}${!isNaN(startOffset) ? ` | Started at ${formatTime(new Date(startOffset), { format: 'withMs' })}` : ''}`,
805-
color: barColor({ isError, isWarn, isHighlighted }),
817+
color: 'var(--color-text-inverted)',
818+
backgroundColor: barColor({ isError, isWarn, isHighlighted, type }),
806819
body: <span>{displayText}</span>,
807820
minWidthPerc: 1,
808821
isError,

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -275,14 +275,6 @@ export const TimelineChart = memo(function ({
275275
events={row.events}
276276
height={rowHeight}
277277
maxVal={maxVal}
278-
eventStyles={(event: TTimelineEvent) => ({
279-
borderRadius: 2,
280-
fontSize: rowHeight * 0.5,
281-
backgroundColor: event.isError
282-
? 'var(--color-bg-danger)'
283-
: 'var(--color-bg-inverted)',
284-
color: 'var(--color-text-inverted)',
285-
})}
286278
scale={scale}
287279
offset={offset}
288280
/>

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

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,19 @@ export type TTimelineEvent = {
1212
end: number;
1313
tooltip: string;
1414
color: string;
15+
backgroundColor: string;
1516
body: React.ReactNode;
1617
minWidthPerc?: number;
1718
isError?: boolean;
1819
markers?: TTimelineSpanEventMarker[];
1920
};
2021

2122
type TimelineChartRowProps = {
22-
events: TTimelineEvent[] | undefined;
23+
events: TTimelineEvent[];
2324
maxVal: number;
2425
height: number;
2526
scale: number;
2627
offset: number;
27-
eventStyles?:
28-
| React.CSSProperties
29-
| ((event: TTimelineEvent) => React.CSSProperties);
3028
onEventHover?: (eventId: string) => void;
3129
onEventClick?: (event: TTimelineEvent) => void;
3230
};
@@ -35,7 +33,6 @@ export const TimelineChartRowEvents = memo(function ({
3533
events,
3634
maxVal,
3735
height,
38-
eventStyles,
3936
onEventHover,
4037
scale,
4138
offset,
@@ -48,7 +45,7 @@ export const TimelineChartRowEvents = memo(function ({
4845
<div
4946
style={{ marginRight: `${(-1 * offset * scale).toFixed(6)}%` }}
5047
></div>
51-
{(events ?? []).map((e: TTimelineEvent, i, arr) => {
48+
{events.map((e: TTimelineEvent, i, arr) => {
5249
const minWidth = (e.minWidthPerc ?? 0) / 100;
5350
const lastEvent = arr[i - 1];
5451
const lastEventMinEnd =
@@ -79,14 +76,14 @@ export const TimelineChartRowEvents = memo(function ({
7976
className="d-flex align-items-center h-100 cursor-pointer text-truncate hover-opacity"
8077
style={{
8178
userSelect: 'none',
82-
backgroundColor: e.color,
8379
minWidth: `${percWidth.toFixed(6)}%`,
8480
width: `${percWidth.toFixed(6)}%`,
8581
marginLeft: `${percMarginLeft.toFixed(6)}%`,
8682
position: 'relative',
87-
...(typeof eventStyles === 'function'
88-
? eventStyles(e)
89-
: eventStyles),
83+
borderRadius: 2,
84+
fontSize: height * 0.5,
85+
color: e.color,
86+
backgroundColor: e.backgroundColor,
9087
}}
9188
>
9289
<div style={{ margin: 'auto' }} className="px-2">

‎packages/app/src/theme/themes/clickstack/_tokens.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -188,8 +188,9 @@
188188
--color-chart-error: #ff725c; /* Red */
189189

190190
/* Chart Semantic Colors - Highlighted (for hover/selection states) */
191-
--color-chart-error-highlight: #ffa090;
191+
--color-chart-success-highlight: #80d9b3;
192192
--color-chart-warning-highlight: #f5c94d;
193+
--color-chart-error-highlight: #ffa090;
193194

194195
/* Mantine Overrides */
195196
--mantine-color-body: var(--color-bg-body) !important;
@@ -376,8 +377,9 @@
376377
--color-chart-error: #ff725c; /* Red */
377378

378379
/* Chart Semantic Colors - Highlighted (for hover/selection states) */
379-
--color-chart-error-highlight: #ffa090;
380+
--color-chart-success-highlight: #80d9b3;
380381
--color-chart-warning-highlight: #f5c94d;
382+
--color-chart-error-highlight: #ffa090;
381383

382384
/* Mantine Overrides */
383385
--mantine-color-body: var(--color-bg-body);

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,9 @@
104104
--color-chart-error: #ff725c; /* Red */
105105

106106
/* Chart Semantic Colors - Highlighted (for hover/selection states) */
107-
--color-chart-error-highlight: #ffa090;
107+
--color-chart-success-highlight: #80d9b3;
108108
--color-chart-warning-highlight: #f5c94d;
109+
--color-chart-error-highlight: #ffa090;
109110

110111
/* Mantine Overrides */
111112
--mantine-color-body: var(--color-bg-body) !important;
@@ -209,8 +210,9 @@
209210
--color-chart-error: #ff725c; /* Red */
210211

211212
/* Chart Semantic Colors - Highlighted (for hover/selection states) */
212-
--color-chart-error-highlight: #ffa090;
213+
--color-chart-success-highlight: #80d9b3;
213214
--color-chart-warning-highlight: #f5c94d;
215+
--color-chart-error-highlight: #ffa090;
214216
}
215217

216218
/* Dark Mode - scoped to .theme-hyperdx */

‎packages/app/src/utils.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -420,6 +420,7 @@ export const CHART_PALETTE = {
420420
brown: '#9c6b4e',
421421
gray: '#9498a0',
422422
// Highlighted variants (lighter shades for hover/selection states)
423+
greenHighlight: '#80d9b3',
423424
redHighlight: '#ffa090',
424425
orangeHighlight: '#f5c94d',
425426
} as const;
@@ -438,6 +439,7 @@ export const CLICKSTACK_CHART_PALETTE = {
438439
brown: '#9c6b4e',
439440
gray: '#9498a0',
440441
// Highlighted variants (lighter shades for hover/selection states)
442+
greenHighlight: '#80d9b3',
441443
redHighlight: '#ffa090',
442444
orangeHighlight: '#f5c94d',
443445
} as const;
@@ -588,6 +590,14 @@ export function getChartColorError(): string {
588590
}
589591

590592
// Highlighted variants (theme-aware)
593+
export function getChartColorSuccessHighlight(): string {
594+
return getSemanticChartColor(
595+
'--color-chart-success-highlight',
596+
CHART_PALETTE.greenHighlight,
597+
CLICKSTACK_CHART_PALETTE.greenHighlight,
598+
);
599+
}
600+
591601
export function getChartColorErrorHighlight(): string {
592602
return getSemanticChartColor(
593603
'--color-chart-error-highlight',

0 commit comments

Comments
 (0)