Skip to content

feat: Sort JSON fields, and show JSON default mostly collapsed #224

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
regeter merged 1 commit into from
Mar 14, 2025
Merged

feat: Sort JSON fields, and show JSON default mostly collapsed #224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 23 additions & 3 deletions src/Dataframe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,32 @@
* JSON viewer for log entries. Clicking on a property _value_
* adds it to the log viewer.
*
* TODO: support clicking on the property name as well, or support an
* icon or other UI element (similar to copy to clip board).
*/
import ReactJson from "react-json-view";

function Dataframe(props) {
return <ReactJson src={props.featuredObject} onSelect={props.onClick} />;
return (
<ReactJson
src={props.featuredObject}
onSelect={props.onClick}
shouldCollapse={(field) => {
if (field.name === "root") {
return false;
}

if (field.name === "request" && field.namespace[0] === "root") {
return false;
}

if (field.name === "vehicle" && field.namespace[0] === "root" && field.namespace[1] === "request") {
return false;
}

// Collapse everything else
return true;
}}
/>
);
}

// TODO: Ideas: allow selecting a field and see how it changes along the map
Expand Down
20 changes: 18 additions & 2 deletions src/localStorage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,12 +126,28 @@ async function processJsonFile(file) {

export function parseJsonContent(content) {
log("Parsing JSON content");

const sortObjectKeys = (obj) => {
Copy link
Copy Markdown

@bshi bshi Mar 14, 2025

Choose a reason for hiding this comment

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

Is this used to modify inputs to ReactJson in the change above? Doesn't ReactJson have a mode/option to sort keys built-in?

Copy link
Copy Markdown
Contributor Author

@regeter regeter Mar 14, 2025

Choose a reason for hiding this comment

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

It's used when ingesting the raw logs and storing them in indexedDB. ReactJson does have a sorted param, but it would have to do this sorting on each dataset switch. I also like that it's now sorted when exporting the logs.

if (obj === null || typeof obj !== "object" || Array.isArray(obj)) {
return obj;
}

return Object.keys(obj)
.sort()
.reduce((sorted, key) => {
sorted[key] = sortObjectKeys(obj[key]);
return sorted;
}, {});
};

try {
return JSON.parse(content);
const parsed = JSON.parse(content);
return sortObjectKeys(parsed);
} catch (error) {
log("Initial JSON parsing failed, attempting to wrap in array");
try {
return JSON.parse(`[${content}]`);
const parsed = JSON.parse(`[${content}]`);
return sortObjectKeys(parsed);
} catch (innerError) {
console.error("JSON parsing error:", innerError);
throw new Error(`Invalid JSON content: ${innerError.message}`);
Expand Down
Loading