Waterfall view for a trace

[ccschmitz]

Summary

Adds a waterfall view of a trace alongside the flame graph. The waterfall view allows you to see all spans in a list and provides a visual of the duration a span takes on the right. It also allows you to filter the spans using the input at the top to quickly find a span of interest.

This PR also fixes an issue with orphan spans not being rendered on certain traces (HIG-4569).

How did you test this change?

• Go to a span anywhere in the product
• Click the "Waterfall" tab to switch from the flame graph to the waterfall view
• Ensure the functionality of the visualization behaves as expected

Please note that lots of the noise in the diff is from a change to our sprinkles and the generated files.

Are there any deployment considerations?

N/A - all client-side changes.

Does this work require review from our design team?

Julian has already provided a round of feedback and provided mocks, but will have him click test as well!

[linear]

HIG-4481 List/waterfall view for a trace

[changeset-bot]

⚠️ No Changeset found

Latest commit: 45e498b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "rrdom" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrdom-nodejs" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-player" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-snapshot" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/types" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/web-extension" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrvideo" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

[mayberryzane]

looks great in preview ✨