Skip to content

feat(website): custom collapsible JSON viewer with finding path highlighting - #5712

Merged
rjerrems merged 2 commits into
google:masterfrom
rjerrems:linter-json-ux
Jul 27, 2026
Merged

feat(website): custom collapsible JSON viewer with finding path highlighting#5712
rjerrems merged 2 commits into
google:masterfrom
rjerrems:linter-json-ux

Conversation

@rjerrems

Copy link
Copy Markdown
Collaborator

Note this was heavily assisted by Antigravity to paper over my failings as a frontend developer.

Right now the code is probably a little more complex than it needs to be, which we can refactor if we provide more specific information where the linting errors are occurring in the file.

You can collapse/expand JSON, there is a JSON copy button now and also you can click on a finding and it will be highlighted in yellow. See attached screenshots.

Screenshot 2026-07-27 11 39 21 AM Screenshot 2026-07-27 11 39 04 AM

…ighting

- Build custom recursive JSON tree renderer (renderCustomJSON) replacing json-formatter-js
- Add data-json-path attributes to JSON rows and extract JSON paths from linter findings
- Auto-expand parent nodes and highlight matching finding paths on click with smooth scroll
- Implement event delegation, safe textContent DOM nodes, and O(1) value-path lookup indexing
- Fix copy button component integration and header alignment across detail columns

TAG=agy
CONV=08e8364f-33ab-44e5-b52f-22b30b10d566
@rjerrems
rjerrems requested a review from jess-lowe July 27, 2026 01:46
jess-lowe
jess-lowe previously approved these changes Jul 27, 2026

@jess-lowe jess-lowe left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Small nit about catching network/parsing errors, but otherwise I've tested it locally, and it works great too :)

Comment thread gcp/website/frontend3/src/linter.js Outdated
Co-authored-by: Jess Lowe <86962800+jess-lowe@users.noreply.github.com>
@rjerrems

Copy link
Copy Markdown
Collaborator Author

Looks great! Small nit about catching network/parsing errors, but otherwise I've tested it locally, and it works great too :)

Oh cool, thanks for picking that up. I have applied but seems I need your approval again :)

@rjerrems
rjerrems merged commit 1986f5b into google:master Jul 27, 2026
26 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants