Skip to content

improvement: Wrap output for lists and dictionaries #2995

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
mscolnick merged 4 commits into from
Dec 2, 2024
Merged

improvement: Wrap output for lists and dictionaries #2995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bb55e10
improve: Switch to wrap JsonViewer output
wasimxyz Nov 28, 2024
7bb4bd0
fix: Wrap by default, collapse strings after length
wasimxyz Nov 28, 2024
ec930c7
Add CollapsibleTextOutput
wasimxyz Nov 29, 2024
c71b2b7
fix: Add comment
wasimxyz Nov 29, 2024
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
25 changes: 21 additions & 4 deletions frontend/src/components/editor/output/JsonOutput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* Copyright 2024 Marimo. All rights reserved. */
import { memo } from "react";
import { memo, useState } from "react";
import {
type DataType,
JsonViewer,
Expand Down Expand Up @@ -45,7 +45,7 @@ export const JsonOutput: React.FC<Props> = memo(
case "tree":
return (
<JsonViewer
className={"marimo-json-output"}
className="marimo-json-output"
rootName={name}
theme={theme}
value={data}
Expand Down Expand Up @@ -75,6 +75,23 @@ function inferBestFormat(data: unknown): "tree" | "raw" {
return typeof data === "object" && data !== null ? "tree" : "raw";
}

// Text with length > 500 is collapsed by default, and can be expanded by clicking on it.
const CollapsibleTextOutput = (props: { text: string }) => {
const [isCollapsed, setIsCollapsed] = useState(true);
return (
<span className="cursor-pointer">
{isCollapsed ? (
<span onClick={() => setIsCollapsed(false)}>
{props.text.slice(0, 500)}
{props.text.length > 500 && "..."}
Copy link
Contributor

@mscolnick mscolnick Nov 29, 2024

Choose a reason for hiding this comment

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

this changes the default case such that all text is hidden at 500. that is ok w/ me, but just point that out.

so if you have a lot of keys you want to expand, you'd have to click all of them (maybe not a common case)

Copy link
Contributor Author

@wasimxyz wasimxyz Nov 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

okay I'll add a comment there. as an aside, this is making me think that having a dedicated JSON viewer / editor plugin (outside the default one for outputs) would be nice to have...

edit: nevermind, looks like that's what mo.tree is for.

Copy link
Contributor

@akshayka akshayka Dec 2, 2024

Choose a reason for hiding this comment

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

Yep that's what mo.tree is for.

</span>
) : (
<span onClick={() => setIsCollapsed(true)}>{props.text}</span>
)}
</span>
);
};

/**
* Map from mimetype-prefix to render function.
*
Expand All @@ -84,7 +101,7 @@ const LEAF_RENDERERS = {
"image/": (value: string) => <ImageOutput src={value} />,
"video/": (value: string) => <VideoOutput src={value} />,
"text/html": (value: string) => <HtmlOutput html={value} inline={true} />,
"text/plain": (value: string) => <TextOutput text={value} />,
"text/plain": (value: string) => <CollapsibleTextOutput text={value} />,
};

// eslint-disable-next-line @typescript-eslint/no-explicit-any
Expand Down Expand Up @@ -131,6 +148,6 @@ function renderLeaf(
try {
return render(leafData(leaf));
} catch {
return <TextOutput text={"Invalid leaf: {leaf}"} />;
return <TextOutput text={`Invalid leaf: ${leaf}`} />;
}
}
3 changes: 0 additions & 3 deletions frontend/src/components/editor/output/Outputs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,13 @@
.marimo-json-output {
padding-top: 2px;
padding-bottom: 2px;

/* content-visibility is set by material UI;
* when set on an element that has overflow auto, causes abrupt jumps when
* scrolling in Chrome */
content-visibility: unset;

/* Coarse hack to stop children from overflowing; doesn't seem to affect
* margin collapse. */
overflow: auto;

@apply text-xs;
}

Expand Down
Loading