@marimo-team/islands 0.24.3-dev9 → 0.25.0

package/src/components/editor/output/Outputs.css

@@ -20,15 +20,13 @@
   @apply text-link;
 }
 
-.output {
-  position: relative;
-}
-
 .output > * {
   max-width: 100%;
 }
 
 .output {
+  position: relative;
+
   /* Unset max-width on .markdown. Instead, we will apply
   to individual elements so it does not affect UI elements in markdown. */
   .markdown {
@@ -65,30 +63,64 @@
 .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;
 
-  .data-key-pair:not(:last-child) {
+  .w-rjv-wrap > :not(:last-child) {
     margin-top: 0.2rem;
     margin-bottom: 0.2rem;
   }
 
-  .copy-button {
-    @apply invisible;
+  .w-rjv-wrap {
+    padding-left: 0.9rem !important;
+    margin-left: 0.3rem !important;
+  }
+
+  .w-rjv-line > span:first-child,
+  .w-rjv-colon,
+  .w-rjv-inner > span,
+  &.w-rjv-inner > span {
+    opacity: 0.8;
+    letter-spacing: 0.03125rem;
+    line-height: 1.5;
+  }
+
+  .w-rjv-inner > div:last-child:not(.w-rjv-wrap),
+  &.w-rjv-inner > div:last-child:not(.w-rjv-wrap) {
+    line-height: 1.5;
+    padding-left: 0 !important;
+  }
+
+  .w-rjv-line > button:only-child {
+    line-height: 1.5;
+  }
+
+  .w-rjv-arrow {
+    transition: transform 0.3s !important;
   }
 
-  .data-key-pair:hover > .copy-button {
-    @apply visible;
+  @media (prefers-reduced-motion: reduce) {
+    .w-rjv-arrow {
+      transition: none !important;
+    }
+  }
+
+  .w-rjv-object-size {
+    padding-left: 4px !important;
+  }
+
+  .copy-button {
+    opacity: 0;
   }
 
-  .data-key-pair:hover > .data-key > .copy-button {
-    @apply visible;
+  .copy-button:focus-visible,
+  .w-rjv-line:hover > .copy-button,
+  .w-rjv-inner:hover > span > .copy-button,
+  /* Root element has both .marimo-json-output and .w-rjv-inner on the same node */
+    &.w-rjv-inner:hover
+    > span
+    > .copy-button {
+    opacity: 1;
   }
 }
 

package/src/components/editor/output/__tests__/JsonOutput-interactions.test.tsx

@@ -0,0 +1,254 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { copyToClipboard } from "@/utils/copy";
+import { JsonOutput } from "../JsonOutput";
+
+vi.mock("@/utils/copy", () => ({
+  copyToClipboard: vi.fn().mockResolvedValue(undefined),
+}));
+
+describe("JsonOutput interactions", () => {
+  it("copies all descendants of a paginated parent and shows the real size", async () => {
+    const data = { rows: Array.from({ length: 120 }, (_, i) => i) };
+    const { getAllByRole, getByText } = render(
+      <JsonOutput data={data} valueTypes="json" />,
+    );
+    expect(getByText("120 Items")).toBeInTheDocument();
+    fireEvent.click(getAllByRole("button", { name: "Copy to clipboard" })[0]);
+    await waitFor(() =>
+      expect(copyToClipboard).toHaveBeenLastCalledWith(
+        JSON.stringify(data, null, 2),
+      ),
+    );
+  });
+
+  it("paginates independently and resets when the data changes", () => {
+    const values = Array.from({ length: 70 }, (_, i) => i);
+    const { getAllByRole, queryByRole, rerender } = render(
+      <JsonOutput data={{ "a.b": values, a: { b: values } }} />,
+    );
+    fireEvent.click(getAllByRole("button", { name: "... 40 more items" })[0]);
+    expect(getAllByRole("button", { name: "... 40 more items" })).toHaveLength(
+      1,
+    );
+    expect(
+      queryByRole("button", { name: "... 10 more items" }),
+    ).toBeInTheDocument();
+    rerender(<JsonOutput data={{ "a.b": values, a: { b: values } }} />);
+    expect(
+      queryByRole("button", { name: "... 10 more items" }),
+    ).not.toBeInTheDocument();
+    expect(getAllByRole("button", { name: "... 40 more items" })).toHaveLength(
+      2,
+    );
+  });
+
+  it("exposes expansion controls and long text as buttons", () => {
+    const text = "a".repeat(150);
+    const { getByRole, getAllByRole, queryByText } = render(
+      <JsonOutput data={{ text, plain: `text/plain:${text}` }} />,
+    );
+    const root = getByRole("button", { name: "Collapse root" });
+    expect(root).toHaveAttribute("aria-expanded", "true");
+    fireEvent.click(root);
+    expect(queryByText("plain")).not.toBeInTheDocument();
+    const collapsedRoot = getByRole("button", { name: "Expand root" });
+    expect(collapsedRoot).toHaveAttribute("aria-expanded", "false");
+    fireEvent.click(collapsedRoot);
+    expect(getByRole("button", { name: "Collapse root" })).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+    expect(queryByText("plain")).toBeInTheDocument();
+    const buttons = getAllByRole("button", { name: `${"a".repeat(100)}...` });
+    expect(buttons).toHaveLength(2);
+    fireEvent.keyDown(buttons[0], { key: "Enter" });
+    expect(buttons[0]).toHaveAttribute("aria-expanded", "true");
+    fireEvent.keyDown(buttons[0], { key: " " });
+    expect(buttons[0]).toHaveAttribute("aria-expanded", "false");
+  });
+  it("initially collapses containers below the fifth level", () => {
+    const data = {
+      one: { two: { three: { four: { five: { leaf: "value" } } } } },
+    };
+    const { getByRole, queryByText, getByText } = render(
+      <JsonOutput data={data} />,
+    );
+    expect(queryByText("leaf")).not.toBeInTheDocument();
+    const collapsed = getByRole("button", { name: "Expand five" });
+    expect(collapsed).toHaveAttribute("aria-expanded", "false");
+    fireEvent.click(collapsed);
+    expect(getByText("leaf")).toBeInTheDocument();
+    const expanded = getByRole("button", { name: "Collapse five" });
+    expect(expanded).toHaveAttribute("aria-expanded", "true");
+    fireEvent.click(expanded);
+    expect(queryByText("leaf")).not.toBeInTheDocument();
+    expect(getByRole("button", { name: "Expand five" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+  it.each([null, undefined, true, 42, Number.NaN, "text"])(
+    "renders scalar %j without tree state",
+    (data) => {
+      const { container } = render(<JsonOutput data={data} />);
+      expect(container.textContent).toBe(JSON.stringify(data) ?? "");
+      expect(container.querySelector(".marimo-json-output")).toBeNull();
+    },
+  );
+
+  it("updates Python and JSON renderers when the mode changes", () => {
+    const data = {
+      yes: true,
+      no: false,
+      none: null,
+      "text/plain+int:2": "value",
+    };
+    const { container, rerender } = render(<JsonOutput data={data} />);
+    expect(container.textContent).toContain("True");
+    expect(container.textContent).not.toContain("text/plain+int:2");
+    rerender(<JsonOutput data={data} valueTypes="json" />);
+    expect(container.textContent).toContain("true");
+    expect(container.textContent).toContain("false");
+    expect(container.textContent).toContain("null");
+    expect(container.textContent).not.toContain("True");
+    expect(container.textContent).toContain('"text/plain+int:2"');
+    rerender(<JsonOutput data={data} valueTypes="python" />);
+    expect(container.textContent).toContain("True");
+    expect(container.textContent).not.toContain("text/plain+int:2");
+  });
+
+  it.each(["python", "json"] as const)(
+    "copies marker-like user strings in %s mode",
+    async (valueTypes) => {
+      const data = {
+        marker: "\u0000show_more\u000042|$",
+        replacement: "<marimo-replace>None</marimo-replace>",
+      };
+      const { getAllByRole } = render(
+        <JsonOutput data={data} valueTypes={valueTypes} />,
+      );
+      expect(
+        getAllByRole("button", { name: "Copy to clipboard" }),
+      ).toHaveLength(3);
+      fireEvent.click(getAllByRole("button", { name: "Copy to clipboard" })[0]);
+      await waitFor(() =>
+        expect(copyToClipboard).toHaveBeenLastCalledWith(
+          JSON.stringify(data, null, 2),
+        ),
+      );
+    },
+  );
+
+  it("paginates arrays after expanding beyond the former depth cutoff", () => {
+    const data = {
+      a: {
+        b: {
+          c: {
+            d: { e: { f: { rows: Array.from({ length: 100 }, (_, i) => i) } } },
+          },
+        },
+      },
+    };
+    const { getByRole, getByText, queryByRole } = render(
+      <JsonOutput data={data} />,
+    );
+    for (const name of ["e", "f", "rows"]) {
+      fireEvent.click(getByRole("button", { name: `Expand ${name}` }));
+    }
+    expect(getByText("100 Items")).toBeInTheDocument();
+    fireEvent.click(getByRole("button", { name: "... 70 more items" }));
+    expect(
+      getByRole("button", { name: "... 40 more items" }),
+    ).toBeInTheDocument();
+    expect(
+      queryByRole("button", { name: "... 70 more items" }),
+    ).not.toBeInTheDocument();
+  });
+});
+
+describe("JsonOutput interaction regressions", () => {
+  it("removes the page control after the last page without collapsing the tree", () => {
+    const data = Array.from({ length: 31 }, (_, i) => i);
+    const { getByRole, queryByRole, getByText } = render(
+      <JsonOutput data={data} />,
+    );
+    fireEvent.click(getByRole("button", { name: "... 1 more items" }));
+    expect(
+      queryByRole("button", { name: /more items/ }),
+    ).not.toBeInTheDocument();
+    expect(getByRole("button", { name: "Collapse root" })).toBeInTheDocument();
+    expect(getByText("31 Items")).toBeInTheDocument();
+  });
+
+  it("does not reuse a previous dataset's page size", () => {
+    const matrix = Array.from({ length: 10 }, () =>
+      Array.from({ length: 60 }, (_, i) => i),
+    );
+    const { rerender, getByRole, queryByRole } = render(
+      <JsonOutput data={matrix} />,
+    );
+    const data = Array.from({ length: 70 }, (_, i) => i);
+    rerender(<JsonOutput data={data} />);
+    fireEvent.click(getByRole("button", { name: "... 40 more items" }));
+    expect(
+      getByRole("button", { name: "... 10 more items" }),
+    ).toBeInTheDocument();
+    expect(
+      queryByRole("button", { name: "... 35 more items" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("does not copy stale data or use the previous display mode", async () => {
+    const { rerender, getAllByRole, getByRole } = render(
+      <JsonOutput data={{ old: true }} />,
+    );
+    const data = { fresh: false, text: "text/plain:literal" };
+    rerender(<JsonOutput data={data} valueTypes="json" />);
+    fireEvent.click(getAllByRole("button", { name: "Copy to clipboard" })[0]);
+    await waitFor(() =>
+      expect(copyToClipboard).toHaveBeenLastCalledWith(
+        JSON.stringify(data, null, 2),
+      ),
+    );
+    expect(getByRole("button", { name: "Collapse root" })).toBeInTheDocument();
+    rerender(<JsonOutput data={data} valueTypes="python" />);
+    fireEvent.click(getAllByRole("button", { name: "Copy to clipboard" })[0]);
+    await waitFor(() =>
+      expect(copyToClipboard).toHaveBeenLastCalledWith(
+        '{\n  "fresh": False,\n  "text": "literal"\n}',
+      ),
+    );
+  });
+
+  it("does not retain decoded MIME text after switching to JSON", () => {
+    const data = {
+      tuple: "text/plain+tuple:[42]",
+      html: "text/html:<b>rich</b>",
+    };
+    const { container, rerender, getAllByRole } = render(
+      <JsonOutput data={data} />,
+    );
+    expect(container.querySelector("b")).toHaveTextContent("rich");
+    expect(getAllByRole("button", { name: "Copy to clipboard" })).toHaveLength(
+      2,
+    );
+    rerender(<JsonOutput data={data} valueTypes="json" />);
+    expect(container.querySelector("b")).toBeNull();
+    expect(container.textContent).toContain('"tuple":"text/plain+tuple:[42]"');
+    expect(container.textContent).toContain('"html":"text/html:<b>rich</b>"');
+    expect(getAllByRole("button", { name: "Copy to clipboard" })).toHaveLength(
+      3,
+    );
+  });
+
+  it("ignores unrelated keys on long-text controls", () => {
+    const text = "x".repeat(150);
+    const { getByRole } = render(<JsonOutput data={{ text }} />);
+    const button = getByRole("button", { name: `${"x".repeat(100)}...` });
+    fireEvent.keyDown(button, { key: "Escape" });
+    fireEvent.keyDown(button, { key: "ArrowDown" });
+    expect(button).toHaveAttribute("aria-expanded", "false");
+  });
+});

package/src/components/editor/output/__tests__/JsonOutput-mimetype.test.tsx

@@ -1,27 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { render } from "@testing-library/react";
-import { beforeAll, describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { JsonOutput } from "../JsonOutput";
 
-// Mock window.matchMedia for JsonViewer
-beforeAll(() => {
-  Object.defineProperty(window, "matchMedia", {
-    writable: true,
-    value: vi.fn().mockImplementation((query) => ({
-      matches: false,
-      media: query,
-      onchange: null,
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  });
-});
-
-describe("JsonOutput with enhanced mimetype handling", () => {
-  it("should render data with various mimetypes without crashing", () => {
+describe("JsonOutput MIME rendering", () => {
+  it("renders text, rich content, and Python collections", () => {
     const data = {
       text: "text/plain:Hello",
       html: "text/html:<strong>Bold</strong>",
@@ -35,16 +18,42 @@ describe("JsonOutput with enhanced mimetype handling", () => {
 
     const { container } = render(<JsonOutput data={data} format="auto" />);
 
-    // Verify component renders without crashing
-    expect(container).toBeInTheDocument();
-    expect(container.querySelector(".marimo-json-output")).toBeInTheDocument();
+    expect(container.textContent).toContain('"text":Hello');
+    expect(container.querySelector("strong")).toHaveTextContent("Bold");
+    expect(container.querySelector("img")).toHaveAttribute(
+      "src",
+      "data:image/png;base64,xyz...",
+    );
+    expect(container.textContent).toContain('"set":{1, 2, 3}');
+    expect(container.textContent).toContain('"tuple":(10, 20)');
+    expect(container.textContent).toContain("application/custom:data");
+    expect(container.textContent).toContain('"boolean":True');
+  });
+
+  it("keeps MIME strings literal in JSON mode", () => {
+    const { container } = render(
+      <JsonOutput
+        data={{ value: "text/plain+tuple:[42]" }}
+        valueTypes="json"
+      />,
+    );
+    expect(container.textContent).toContain('"value":"text/plain+tuple:[42]"');
+  });
+
+  it("renders singleton tuples and escaped collection strings", () => {
+    const { container } = render(
+      <JsonOutput
+        data={{
+          tuple: "text/plain+tuple:[42]",
+          set: 'text/plain+set:["text/plain:literal"]',
+        }}
+      />,
+    );
+    expect(container.textContent).toContain('"tuple":(42,)');
+    expect(container.textContent).toContain('"set":{"text/plain:literal"}');
   });
 
   it("renders encoded non-string keys with Python-style affordances", () => {
-    // Server-side `_key_formatter` encodes non-string dict keys with
-    // mimetype prefixes; the frontend `keyRenderer` must decode them
-    // so users see the original Python types (unquoted ints, parens for
-    // tuples, etc.) instead of the raw encoded strings.
     const data = {
       "text/plain+int:2": "int_val",
       "text/plain+float:2.5": "float_val",
@@ -59,34 +68,23 @@ describe("JsonOutput with enhanced mimetype handling", () => {
     const { container } = render(<JsonOutput data={data} format="tree" />);
     const text = container.textContent ?? "";
 
-    // `text/plain+str:` is the escape prefix — must never survive in output.
     expect(text).not.toContain("text/plain+str:");
-    // Other encoded prefixes must not leak as-is. (They can still appear
-    // inside the unescaped original string key `"text/plain+int:2"`,
-    // which is intentional — but not for types *other* than int.)
     expect(text).not.toContain("text/plain+bool:True");
     expect(text).not.toContain("text/plain+tuple:[");
     expect(text).not.toContain("text/plain+frozenset:[");
     expect(text).not.toContain("text/plain+none:");
 
-    // Decoded visual forms are present with Python-style affordances.
     expect(text).toContain('None:"none_val"');
     expect(text).toContain('True:"bool_val"');
     expect(text).toContain('2:"int_val"');
     expect(text).toContain('2.5:"float_val"');
     expect(text).toContain('(1, 2):"tuple_val"');
     expect(text).toContain('frozenset({3, 4}):"fs_val"');
-    // Escaped str key renders as the original literal string (quoted).
     expect(text).toContain('"text/plain+int:2":"escaped_str_val"');
-    // Plain string key unchanged.
     expect(text).toContain('"plain":"unchanged"');
   });
 
   it("renders 1-tuple and empty-frozenset keys with correct Python syntax", () => {
-    // Regressions caught in review: `(1)` is not a tuple (needs `(1,)`),
-    // and `frozenset({})` reads like constructing from an empty dict
-    // (should be `frozenset()`). Locks in the tree-view rendering so these
-    // don't slip back.
     const data = {
       "text/plain+tuple:[42]": "one_tuple",
       "text/plain+tuple:[]": "empty_tuple",
@@ -97,15 +95,13 @@ describe("JsonOutput with enhanced mimetype handling", () => {
     const { container } = render(<JsonOutput data={data} format="tree" />);
     const text = container.textContent ?? "";
 
-    expect(text).toContain('(42,):"one_tuple"'); // trailing comma
+    expect(text).toContain('(42,):"one_tuple"');
     expect(text).toContain('():"empty_tuple"');
-    expect(text).toContain('frozenset():"empty_fs"'); // not `frozenset({})`
+    expect(text).toContain('frozenset():"empty_fs"');
     expect(text).toContain('frozenset({1}):"one_fs"');
   });
 
   it("quotes integer-like string keys to distinguish them from int keys", () => {
-    // Without this, `"2"` and the decoded int `2` look identical — the
-    // textea viewer drops quotes from integer-like string keys by default.
     const data = {
       "2": "string_two",
       "text/plain+int:2": "int_two",
@@ -114,9 +110,8 @@ describe("JsonOutput with enhanced mimetype handling", () => {
     const { container } = render(<JsonOutput data={data} format="tree" />);
     const text = container.textContent ?? "";
 
-    expect(text).toContain('"2":"string_two"'); // quoted
-    expect(text).toContain('2:"int_two"'); // unquoted
-    // Non-integer string keys still render without our intervention.
-    expect(text).not.toContain("text/plain+"); // prefix stripped from int key
+    expect(text).toContain('"2":"string_two"');
+    expect(text).toContain('2:"int_two"');
+    expect(text).not.toContain("text/plain+");
   });
 });