Adjust rendering of tabs

[thebiglabasky]

Closes https://linear.app/metabase-inc/issue/DEVX-101/streamline-visualizer-to-focus-on-important-information

This one is giving a facelift to the debugger with the following changes:

Improvements

• Systematically show description and URL above tabs (when they're available)
• Extract basic information like browser, os etc. as pills at the top right to make these easy to check out
• Removes the table rendering of JSON values was breaking often and not adding value, in favor of partial JSON rendering. Parts that were extracted in a JSON tab:
  • entityInfo to focus on checking out the entity details
  • bugReportDetails since it doesn't make much sense to bother formatting that further
  • Raw content can still be used as a fallback in case people really want to, but might be worth removing since each part is extracted, and the raw can be downloaded from Slack or the issue ticket anyway
• Incorporates the count of lines in each tab instead of a floating thingy which visually breaks for large numbers, and remove tabs which have 0 items to show

Fixes

• The data structure was reshuffled, introducing a basicInfo wrapper whenever uploading files directly to the debugger, which was making things messy.

New dependencies

• Adding some SVG icons required me to add @svgr/webpack to facilitate imports, as well as vite-plugin-magical-svg (to prevent rendering issues in a testing context)
• Introduce react18-json-view to render JSON much more nicely, enabling folding etc.

Videos 🎥

• Showing how it now looks and works

• Running through the code changes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
metabase-debugger	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 28, 2025 8:51pm

[thebiglabasky]

Linear issue: https://linear.app/metabase-inc/issue/DEVX-101/streamline-visualizer-to-focus-on-important-information

[iethree]

I realize you're not a developer here, and I really appreciate how you're trying to push this work forward. My biggest piece of feedback is that this would have been much easier to deal with in separate PRs:

1. add record count to tabs
2. hide empty tabs
3. restructure basicInfo data shape
4. Move information to header
5. Add json formatter
6. Add SVGs for browsers + OSes

This isn't even so much because big chunks of code are hard to review, it's that if there are problems with any of them, they can be worked through independently, rather than blocking a bunch of easy changes behind some trickier ones

[thebiglabasky]

I realize you're not a developer here, and I really appreciate how you're trying to push this work forward. My biggest piece of feedback is that this would have been much easier to deal with in separate PRs:

1. add record count to tabs
2. hide empty tabs
3. restructure basicInfo data shape
4. Move information to header
5. Add json formatter
6. Add SVGs for browsers + OSes

This isn't even so much because big chunks of code are hard to review, it's that if there are problems with any of them, they can be worked through independently, rather than blocking a bunch of easy changes behind some trickier ones

Absolutely, I realized that too late actually as I was originally "just" focusing on reordering tabs. As I was testing things out, one thing led to another and by pulling the thread, half of the sweater came. That's clearly something I'll worry more about if I ever do this again 😅

[thebiglabasky]

I went with separate commits to make the fixes easier to review in isolation

[iethree]

moving this conditional in here lets us conditionally render these while making the parent component much more readable

[thebiglabasky]

Indeed!

[iethree]

the json formatting library was nice, but as i tested it more, it tended to crash the browser with larger data sets pretty consistently. Moving back to formatted raw text until we can find a more stable library

[thebiglabasky]

Yeah that's too bad. I should have tested with large query results

[thebiglabasky]

Nice!
I hadn't tried with large datasets indeed so good call about the json rendering. The conditional looks a lot better too.