Bug: devtools "rendered at" for child components uses value of top component

[eps1lon]

React version: 17.0.2
devtools version: 4.18.0-f58bbcf9a

Steps To Reproduce

1. Record profiling session
2. Goto flamegraph
3. Click on a "bar" that's not the top-most

Link to code example: https://codesandbox.io/s/vibrant-thunder-bm3so

The current behavior

"rendered at" uses the value from the root component

The expected behavior

it should use the same value that is displayed in the tooltip. Otherwise I don't see much value in displaying it since I could just read the value directly from the root. I thought it was intended for very dense flamegraphs e.g.

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[eps1lon]

The tooltip is fine now but the description in the right column seems misleading to me.

[eps1lon]

Can still reproduce in latest DevTools and React version. @bvaughn Am I misunderstanding what the "rendered at" in the side-panel is supposed to say?

[bvaughn]

The "rendered at" time in this label is not specific to the component. It's describing the commit that the component rendered as part of. If you have suggestions for changing the label, I'm open to hearing them.

I think we could use the Fiber's actualStartTime flag to read the time when the specific Fiber was worked on, if that would be helpful, but we'd have to eager traverse the Fiber tree and collect these times for every fiber while profiling since they're reset each time the Fiber is worked on.

[eps1lon]

The "rendered at" time in this label is not specific to the component.

When you mean "label" you refer to the side-panel?

What I don't understand is why we do display different information in the tooltip. I would just expect the same timings displayed in the tooltip to appear in the side-panel. Because it's a bit unintuitive that the side-panel would first show a timing alpha with the heading "commit information" and also display that exact same timing alpha with the heading "SpinCPU" (i.e. the component name).

Basically we have timing alpha but depending on what context we're in, we display it differently.

Commit information
commited at: $CommitedAtAlpha
Render duration: $RenderDurationAlpha

vs

SpinCPU
Rendered at:
$CommittedAtAlpha for $RenderDurationAlpha

CommittedAt and $RenderDuration do not change at all.

If you have suggestions for changing the label, I'm open to hearing them.

Don't display "rendered at" under the component header because it's not specific to the component.

Instead

SpinCPU
Why did this render?
This is the first time the component rendered.

Commit information
commited at: $CommitedAtAlpha
Render duration: $RenderDurationAlpha

Though ultimately I would still prefer to display the timing information of the tooltip in the side-panel. You have to be very precise to view the component specific timing depending on the hoverable area.

SpinCPU
$TooltipTimeA of $TooltipTimeB
Why did this render?
This is the first time the component rendered.

Commit information
commited at: $CommitedAtAlpha
Render duration: $RenderDurationAlpha
```

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[eps1lon]

Bump

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!