feat(viewer): add json tree viewer #1970
Conversation
…ance UI with tooltips
| } | ||
| private onSearchInput(): void { | ||
| clearTimeout(this.searchTimeout) |
There was a problem hiding this comment.
It seems the component doesn't clean up timeouts when destroyed?
|
Just realized, need to test and handle Big Int issues in JSON, which is common in IoT development. Should use the existing JSON Parse method instead of JS's JSON API |
|
Wonder what kind of prompt/message and effect will appear when opening it if the payload is not JSON data? |
Can add some edge cases/boundary conditions to the test cases for testing |
| return this.theme || 'light' | ||
| } | ||
| get treeOptions(): any { |
There was a problem hiding this comment.
It looks like there's a fixed format here, the type shouldn't be any?
| private searchQuery = '' | ||
| private currentIndex = 0 | ||
| private copiedJson = false | ||
| private searchTimeout: any = null |
There was a problem hiding this comment.
| private searchTimeout: any = null | |
| private searchTimeout: number | null = null |
|
Overall, I think there are no major issues, need to consider more edge cases, if there are performance issues should also consider them in advance, and there seem to be too many Thanks for your contribution. |
PR Checklist
If you have any questions, you can refer to the Contributing Guide
What is the new behavior?
This Pull Request adds new features to the Viewer. Specifically follows the addition of Diff View with JSON Viewer.
Functionality wise the following features are added:
JSON Tree View:
a. It allows user to view payloads in expandable and collapsible form using
vue-json-tree-viewas the dependency to parse and view JSON as a tree. Additionally, there is acopyoption added which will copy the JSON payload to the system clipboard. If the payload is Non-JSON, it is displayed as a single collapsible node.Please check the corresponding UI:
Additionally, there is also a search feature implemented to search in the payload.
b. Visualization: We use ECharts to visualize the JSON as a tree, the depth level can be set, and on right click of node, the subtree will be copied as JSON. It also supports dark theme.
c. Navigation: The payload history navigation is controlled through Arrow keys, Left and Right.
Key Summary of utility function changes:
Does this PR introduce a breaking change?