Use JsonTree in network detail view

[snappdevelopment]

Flocon is already using JsonTree when opening a response in a separate window. I think it is also useful to have syntax highlighting and expand/collapse functionality directly in the network detail view, so I added JsonTree there as well.
With my change, JsonTree is used to render response bodies and only if an error occurs the plain text fallback is used (which still applies a length limit like before).

JsonTree uses a LazyColumn internally so it needs a fixed height (I gave it 600.dp) to make it work in a scrollable container like the network detail view.

I saw this issue so I tested some large responses with JsonTree and with the plain text view.

• JsonTree was able render a 130MB json file with about 2sec of loading in my demo app. You mentioned a 16MB limit from web sockets, so this should be fine as long as the json is valid.
• With the plain text view I was able to open a response with 8m characters with just a short UI lag. So a 1m limit is still pretty low, but allows to show most responses directly. The 30k limit was hiding most of my responses, which is not really necessary.

[gemini-code-assist]

Summary of Changes

Hello @snappdevelopment, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience in the network detail view by introducing an interactive JSON tree viewer for response bodies. This change provides a more user-friendly way to inspect JSON data, offering syntax highlighting and collapsible sections. Furthermore, the threshold for displaying large response bodies has been substantially increased, reducing the need for manual override for moderately sized responses and improving the default display behavior.

Highlights

• Interactive JSON Display: Integrated JsonTree into the network detail view to provide syntax highlighting and expand/collapse functionality for JSON response bodies, enhancing readability and interaction.
• Increased Body Length Limit: The LARGE_BODY_LENGTH constant has been significantly increased from 30,000 to 1,000,000 characters, allowing much larger response bodies to be displayed directly without requiring manual override.
• Error Fallback for JSON Tree: Implemented a fallback mechanism where if JsonTree encounters an error (e.g., invalid JSON), the response body will be displayed as plain text using FloconCodeBlock.
• Fixed Height for JsonTree: Assigned a fixed height of 600.dp to the JsonTree component within the network detail view to ensure it functions correctly within scrollable containers.
• Configurable Initial Tree State: The FloconJsonTree component now accepts an initialState parameter, allowing control over the initial expansion level of the JSON tree.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request is a great enhancement, integrating JsonTree to provide a much better experience for inspecting JSON responses in the network detail view. The implementation is solid, including a fallback to a plain text view for non-JSON content or in case of parsing errors. I've found one high-severity issue regarding state management in Jetpack Compose that could lead to incorrect UI behavior when switching between different network requests. Addressing this will make the feature robust.

[gemini-code-assist]

The jsonError state should be reset when the response changes. Currently, if an invalid JSON response sets jsonError to true, it will persist even when viewing a subsequent valid JSON response, preventing FloconJsonTree from being displayed. To fix this, you should key the remember call to response.body.

Suggested change

	var jsonError by remember { mutableStateOf(false) }
	var jsonError by remember(response.body) { mutableStateOf(false) }

[snappdevelopment]

Added that change

[rteyssandier]

@snappdevelopment Other things, since you are the author of JsonTree. It it possible to add a system to customize highlight ? To make a diff between 2 jsons ? A bit like a PR review on GitHub

[snappdevelopment]

@snappdevelopment Other things, since you are the author of JsonTree. It it possible to add a system to customize highlight ? To make a diff between 2 jsons ? A bit like a PR review on GitHub

Interesting idea. What would be your use case for this? And how do you image it to look like?
I think I would need to look into how diffing works in general and then see if this is something that JsonTree can/should do, or if this would be a separate project.

[rteyssandier]

@snappdevelopment I imaging it like GitHub side by side in PR Review, we see line highlighted and word to see difference. It would be useful to compare Json between 2 requests

[snappdevelopment]

@rteyssandier I see. I thought about this over the weekend a bit. I will try to build something and let you guys know if it works. We can move this topic to the discussion section if you want to unblock this MR, or I will just open a MR at some point.

[rteyssandier]

Yes totally, #490