Skip to content

Add search with match highlighting#51

Merged
mcollina merged 2 commits into
mainfrom
add-search
Jul 9, 2026
Merged

Add search with match highlighting#51
mcollina merged 2 commits into
mainfrom
add-search

Conversation

@mcollina

@mcollina mcollina commented Jul 9, 2026

Copy link
Copy Markdown
Member

Closes #24

What

Adds frame search to FullFlameGraph and the CLI-generated HTML:

  • New SearchControls component: a search input with prev/next navigation, match counter, and keyboard support (Enter / Shift+Enter cycle through matches, Escape clears).
  • Matching is a case-insensitive substring test against function name and file name; matches are ordered hottest-first.
  • All matching frames are highlighted live in the flame graph: matches render at full opacity while non-matching frames (and their labels) are dimmed. Clearing the query restores normal rendering.
  • Selecting a match drives the existing selection machinery, so it zooms to the frame and opens Stack Details.

How

  • FrameRenderer accepts an optional set of highlighted frame IDs and computes per-frame opacity from it; text labels reuse the same opacity map.
  • FlameGraphRenderer exposes setHighlightedFrames(frameIds | null), which re-renders immediately without triggering zoom animations.
  • FlameGraph gets a highlightedFrameIds prop, re-applied when the renderer is recreated (e.g. toggling "Show App Code Only" mid-search).
  • FullFlameGraph gets a showSearch prop (default true) and wires SearchControls matches into FlameGraph.
  • Exported from the package root; component docs and Storybook stories included, matching existing conventions.

Bug fixes

Search is the first feature to read frame names from FullFlameGraph's internal frame list, and it exposed two pre-existing bugs there:

  • Frame names were resolved via profile.stringTable[i] instead of profile.stringTable.strings[i], so every frame was named func_N. Fixed, and file name / line number are now extracted too.
  • Node IDs were missing the root/ prefix used by the renderer and frameMap, so selections resolved to nothing (zeroed values in Stack Details, no sync with hottest-frames navigation).

Testing

  • New tests/search-controls.spec.ts (9 tests): rendering, match counting, file-name matching, match cycling, Escape behavior, and a canvas-level check that searching actually changes the rendering and clearing restores it.
  • Full Chromium suite passes: 224/224.
  • Verified interactively in CLI-generated HTML (search, highlight, cycle, clear).

mcollina added 2 commits July 9, 2026 12:14
Adds a SearchControls component to FullFlameGraph and the CLI output.
Typing a query matches frames by function or file name, highlights all
matches in the flame graph (non-matches are dimmed), and Enter or the
navigation buttons cycle through matches hottest-first.

Also fixes two bugs in FullFlameGraph's internal frame list that search
exposed: frame names resolved through the wrong stringTable accessor
(every frame was named func_N), and node IDs missing the root/ prefix
used by the renderer, which broke selection lookups.

Closes #24

@leorossi leorossi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mcollina mcollina requested a review from Qard July 9, 2026 10:51
@mcollina mcollina merged commit 6b3e0c1 into main Jul 9, 2026
44 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add search

2 participants