Skip to content

Enhance profiler flame chart and unify design#252

Merged
butschster merged 1 commit intomasterfrom
feature/profiler-flamechart-enhancements
Mar 26, 2026
Merged

Enhance profiler flame chart and unify design#252
butschster merged 1 commit intomasterfrom
feature/profiler-flamechart-enhancements

Conversation

@butschster
Copy link
Copy Markdown
Member

@butschster butschster commented Mar 26, 2026

Summary

  • Flame chart: search — inline search input in toolbar with autocomplete dropdown, finds functions by name across the tree
  • Flame chart: sandwich view — click any block to see all callers and callees of that function aggregated in a sidebar
  • Flame chart: bug fix — properly destroy old FlameChart instances on metric switch (was causing visual glitches from stale event listeners)
  • Flame chart: theming — dark-mode-aware colors for canvas, timeline, graph peaks, knobs, and text; removed duplicate time header; increased block padding to prevent text overlap
  • Design unification — all three profiler tabs (Call graph, Flamechart, Top functions) now share consistent styling:
    • Background: bg-gray-50 dark:bg-gray-800 (matches site default)
    • Frosted glass toolbars (backdrop-blur-sm, semi-transparent)
    • Overflow-hidden cascade from profiler page through tab panels
    • Top functions: sticky frosted header, zebra rows with contrast, hover states
image

Test plan

  • Open profiler page, switch between all three tabs — no scroll leaks
  • Flamechart: switch metrics (Wall time → CPU → Memory) — no visual glitches on hover
  • Flamechart: type in search, verify autocomplete shows functions with call counts
  • Flamechart: click a block — sandwich sidebar opens with callers/callees
  • Flamechart: click caller/callee in sidebar — navigates to that function's sandwich
  • Verify dark mode colors on timeline (light text, blue peaks, themed knobs)
  • Call graph: verify frosted glass toolbar style
  • Top functions: verify sticky header, zebra rows, active column highlight
  • Test fullscreen mode in call graph

🤖 Generated with Claude Code

Flame chart improvements:
- Add function search with autocomplete in toolbar
- Add sandwich view sidebar (callers/callees on click)
- Fix metric switching bug (destroy old FlameChart instance properly)
- Set dark-mode-aware background colors for canvas and timeline
- Style timeline: light text, blue graph peaks, themed knobs
- Remove duplicate time header, increase block padding

Design unification across Call graph / Flamechart / Top functions:
- Unified background: bg-gray-50 dark:bg-gray-800 everywhere
- Frosted glass toolbars (backdrop-blur-sm, semi-transparent)
- Profiler page: overflow-hidden cascade, tab panels flex-1
- Top functions: sticky frosted header, zebra rows, hover states
- Call graph: consistent bg, frosted toolbar styling

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@butschster butschster merged commit 16123f0 into master Mar 26, 2026
0 of 3 checks passed
@butschster butschster deleted the feature/profiler-flamechart-enhancements branch March 26, 2026 21:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

1 participant