fix(json): replace vue3-json-viewer, whose tree renders on top of itself - #691
Open
2xburnt wants to merge 3 commits into
Open
fix(json): replace vue3-json-viewer, whose tree renders on top of itself#6912xburnt wants to merge 3 commits into
2xburnt wants to merge 3 commits into
Conversation
The JSON block on a transaction is unreadable. vue3-json-viewer wraps its block-level .jv-node rows in an inline <span class="jv-push"> and ships no CSS rule for it, so the tree never establishes block flow: rows paint over one another and most of the document is unreachable. Measured on a real transaction: root .jv-node height 90px its subtree 262,462px .jv-code overflow: hidden, max-height 300px (the `boxed` prop) content clipped away 34,619 of 34,769px Forcing display:block on .jv-push is not sufficient. This is visible on ping.pub today, on any transaction large enough to matter. vue-json-pretty styles its rows as flex with an explicit line-height, and supports virtual scrolling - which matters here, since a single IBC transaction is ~3,900 lines. It renders 22-30 DOM rows instead of the whole tree. The old `copyable` prop has no equivalent, so the copy action is reimplemented as a button, alongside an expand/collapse toggle. Both are behind existing i18n keys added to en.json. Line numbers are enabled, and the tree opens two levels deep rather than five, since the first two are the useful ones. Verified on a real transaction: no overlapping rows, the toggle cycles 22 -> 30 -> 4 rendered rows, and copy puts 170,577 characters of valid JSON on the clipboard.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e70ebf8b62
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Contributor
Author
|
example of current rendering 
|
The previous commit dropped the `copyable` prop from all four viewers but only gave the transaction-detail one a replacement, so the Wasm function result and the two cosmwasm panels (contract state, query/execute result) lost the ability to copy their JSON. Thanks @chatgpt-codex-connector for catching it. Rather than repeat the handler at each site, the viewer and its controls move into a JsonTree component that all four now use. That keeps copy and expand/collapse consistent, and means a future viewer cannot pick up one without the other. Two details worth noting: - the control strings move from tx.* to a shared json.* namespace, since they are no longer specific to the transaction page. - JsonTree resets to its collapsed depth when `data` changes, so re-running a contract query does not inherit the previous result's expansion state. Virtual scrolling stays opt-in via a prop: the transaction page needs it for ~3,900-line documents, the contract panels are short and size to their content.
Reload transaction details when the route hash changes and prevent invalid transaction-hash searches. Co-authored-by: Cursor <cursoragent@cursor.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The JSON block on a transaction is unreadable. vue3-json-viewer wraps its block-level .jv-node rows in an inline and ships no CSS rule for it, so the tree never establishes block flow: rows paint over one another and most of the document is unreachable. Measured on a real transaction:
root .jv-node height 90px
its subtree 262,462px
.jv-code overflow: hidden, max-height 300px (the
boxedprop)content clipped away 34,619 of 34,769px
Forcing display:block on .jv-push is not sufficient. This is visible on ping.pub today, on any transaction large enough to matter.
vue-json-pretty styles its rows as flex with an explicit line-height, and supports virtual scrolling - which matters here, since a single IBC transaction is ~3,900 lines. It renders 22-30 DOM rows instead of the whole tree.
The old
copyableprop has no equivalent, so the copy action is reimplemented as a button, alongside an expand/collapse toggle. Both are behind existing i18n keys added to en.json. Line numbers are enabled, and the tree opens two levels deep rather than five, since the first two are the useful ones.Verified on a real transaction: no overlapping rows, the toggle cycles 22 -> 30 -> 4 rendered rows, and copy puts 170,577 characters of valid JSON on the clipboard.