Collapsible flamegraph toggle in TraceDetailV2

[hudsongeovane]

Summary

This PR allows the user to collapse and uncollapse the flamegraph in the Trace Detail page.

Related Issues / PR's

This change is related to issue #7146

Screenshots

This is now the appearence of the page (a toggle button was inserted) without collapsing the flamegraph.

This is a screenshot of the page with the flamegraph collapsed.

Affected Areas and Manually Tested Areas

I tested the page manually and it works properly.

---

Important

Add toggle functionality to collapse and expand the flamegraph in TraceDetailV2.

• Behavior:
  • Adds isFlamegraphCollapsed state and toggleFlamegraph function in TraceDetailV2.tsx to manage flamegraph visibility.
  • Flamegraph visibility toggled by a button with icon changing between ChevronDown and ChevronRight.
  • Conditional rendering of TraceFlamegraph based on isFlamegraphCollapsed state.
• UI:
  • Adds a button to toggle flamegraph visibility in TraceDetailV2.tsx.
  • Button displays ChevronDown when expanded and ChevronRight when collapsed.

^{This description was created by for 1152be2. It will automatically update as commits are pushed.}

[welcome]

Welcome to the SigNoz community! Thank you for your first pull request and making this project better. 🤗

[CLAassistant]

All committers have signed the CLA.

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to 1152be2 in 1 minute and 39 seconds

More details

• Looked at 59 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx:50

• Draft comment:
  Consider extracting the icon size (currently hardcoded as 14) into a design token or a constant to maintain consistency across the app.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50%
  While using design tokens for consistent values is generally good practice, this is a very minor UI detail. The size 14 appears to be used only once in this component for these specific icons. Without seeing the broader design system or other icon usages, we can't be certain this needs to be standardized. The comment feels overly nitpicky for the scope of this change.
  The suggestion could improve design consistency if there are other icons in the system that should share the same size. However, not every numeric value needs to be a constant - sometimes a one-off value is fine.
  Given that this is a minor UI detail and we don't have evidence that this size needs to be standardized across components, the comment adds unnecessary complexity for minimal benefit.
  Delete the comment as it suggests a potentially unnecessary abstraction for a minor UI detail without clear evidence that standardization is needed here.

2. frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx:50

• Draft comment:
  ⚠️ Avoid magic numbers: The toggle icon size is hardcoded as 14 in getFlamegraphButtonIcon. Consider extracting this value as a constant or using design tokens for consistency.
• Reason this comment was not posted:
  Confidence changes required: 50% <= threshold 50%
  None

3. frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx:97

• Draft comment:
  🔎 For better accessibility, consider adding an aria-label to the flamegraph toggle button to clearly indicate its purpose.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_YijOBAlBWtrX1WI5

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

For accessibility, consider adding an 'aria-expanded' attribute to the button (e.g. aria-expanded={!isFlamegraphCollapsed}) to clearly indicate its state.

Suggested change

	type="text"
	type="text" aria-expanded={!isFlamegraphCollapsed}

[hudsongeovane]

I had some doubts about this approach. I also explored passing the property directly to TraceFlamegraph (which would keep it mounted but not visible, I presume). If you think that's a better direction, please advise. Open to suggestions, thanks!

[hudsongeovane]

Also, from a UI/UX perspective, I don't know if it is clear to the user when the flamegraph is collpased that there is something hidden or ready to expand at all (See the 2nd screenshot). If you guys would like me to address that somehow, just let me know.