[www] Sandbox output improvements

[ayoung19]

Chose to do it this way because I think it'll make virtualization a lot easier in the future. The alternative is a "sticky header" that changes as you scroll.

Details

• Moved output details from Sandbox.tsx into its own component. Everything is the same except from when it was in Sandbox.tsx except for the removed states, a removed hover styling, and a new "back to list" bar.
• Removed consoleRef and scroll behavior because it's not needed anymore.
• Removed collapsedQuery/Log/Transaction states because it defaults as collapsed.

[stopachka]

Nice push Andy!

A few things I worry about with this UX change:

1. Can't open sections inside the list
   1. This means that users would have to click in and out of different details, to get a full picture. I think being able to open up and see two sections at once is important
2. Everything is collapsed by default
   1. This means even for small amounts of data, now you have to make multiple clicks to see what you wanted

For 1, I think we should make sure that you can open sections within a list, like the previous behavior.

To handle larger json blobs, there's two ideas I see:

1. Selectively collapse larger json blobs
   a. i.e maybe we detect size somehow
2. Create a custom "JSON" renderer, which effectively virtualizes the json rendering.

WDYT @nezaj @dwwoelfel @tonsky @drew-harris ?

[nezaj]

Nice push Andy!

A few things I worry about with this UX change:

1. Can't open sections inside the list

   1. This means that users would have to click in and out of different details, to get a full picture. I think being able to open up and see two sections at once is important

2. Everything is collapsed by default

   1. This means even for small amounts of data, now you have to make multiple clicks to see what you wanted

For 1, I think we should make sure that you can open sections within a list, like the previous behavior.

To handle larger json blobs, there's two ideas I see:

1. Selectively collapse larger json blobs
   a. i.e maybe we detect size somehow
2. Create a custom "JSON" renderer, which effectively virtualizes the json rendering.

WDYT @nezaj @dwwoelfel @tonsky @drew-harris ?

• I agree about having collapsed/uncollapsed be in the same list!
• I like collapse larger json blobs as the next step -- we can base it off line count (e.g. more than 25 lines we collapse)?

[ayoung19]

Sorry for the late response! Had a busy weekend.

This means that users would have to click in and out of different details, to get a full picture. I think being able to open up and see two sections at once is important

In that case we should revert everything + go with the "sticky header" approach to help users figure out exactly which query they're looking at + how long it took. It could probably be in that existing header.

Create a custom "JSON" renderer, which effectively virtualizes the json rendering.

I was thinking about this too! Except it would mean users won't be able to copy an entire list of JSON anymore (because it is virtualized away). Would y'all be fine with that?

Also correct me if I'm wrong but the old card styling/UI isn't possible when virtualizing. The json rows/permission checks would need to be direct children of the virtualized container.