feat: network waterfall view for session replay

[pauldambra]

#TravelHackathon

We have all the data we need to generate page reports in individual recording's session replay data

We can't make it queryable but we can display it individually, that's already useful so let's do that

TODO

• react to playlist ID changes
• show breakdown of asset types by size
• allow filtering to remove asset types from view
• make it exportable?
• make it work with notebooks
• change the URL when e.g. paging so you can share with others
• allow public sharing?
• make an aggregate view that shows the whole session collapsed by URL with box-plots

if it's a mode of the player we can ignore

• don't mark as viewed?

[github-actions]

Size Change: +58 B (+0.01%)

Total Size: 1.03 MB

ℹ️ View Unchanged

Filename	Size	Change
frontend/dist/toolbar.js	1.03 MB	+58 B (+0.01%)

_{compressed-size-action}

[posthog-bot]

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

• chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

• chromium: 0 added, 2 modified, 0 deleted (diff for shard 1)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[pauldambra]

@daibhin thought I'd put something up you can play with to get UX feedback - am already thinking it should be called "page report" not "network view"

[pauldambra]

pulled out

• fix: fcp matching can't work #22355
• chore: simplify a line of code #22352

[daibhin]

This feels cool. Great to give people another means of analysing their data. I made two larger changes:

• Put the contents into a table for easier formatting
• Cleaned up the asset proportions to hide text on smaller screens

I think the main question I took away from it all was why this is a separate tab to the recordings? I'd imagine it would be quite annoying to have to switch between the two tabs and find a recording again if you want to look at the waterfall view.

Do we expect someone to use this while analysing a recording or is it something they'd intentionally come to do? Could this be a different view on the existing recording that you can toggle to? Or maybe it could just be another tab in the inspector?

[pauldambra]

I think the main question I took away from it all was why this is a separate tab to the recordings?

Yeah, I think eventually you'd want to be able to visit individual page reports, share them, export them.

It was separate mostly just cos I was figuring it out as I go. And a way to promote the feature more easily.

---

I don't think it should live only in the inspector. It feels too restricted.

---

I'd be keen to get it in behind a flag so we can see the display with some production data to sense check that.

[pauldambra]

super confused why moving the initiator type color mapping has broken all uses of color in js tests 🫠

[posthog-bot]

📸 UI snapshots have been updated

3 snapshot changes in total. 0 added, 3 modified, 0 deleted:

• chromium: 0 added, 3 modified, 0 deleted (diff for shard 2)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

4 snapshot changes in total. 0 added, 4 modified, 0 deleted:

• chromium: 0 added, 4 modified, 0 deleted (diff for shard 1, diff for shard 2)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

• chromium: 0 added, 1 modified, 0 deleted (diff for shard 1)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[marandaneto]

low context approval given :D since it's behind a flag anyways