@marimo-team/frontend 0.24.3-dev80 → 0.24.3-dev81

package/src/core/cells/__tests__/outputs.test.tsx

@@ -0,0 +1,117 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { notebookAtom } from "@/core/cells/cells";
+import { CellId } from "@/core/cells/ids";
+import { type AppMode, viewStateAtom } from "@/core/mode";
+import { useExpandedConsoleOutput, useExpandedOutput } from "../outputs";
+
+const saveCellConfig = vi.fn().mockResolvedValue(null);
+
+vi.mock("@/core/network/requests", () => ({
+  getRequestClient: () => ({ saveCellConfig }),
+}));
+
+function setup(opts: { mode: AppMode; expandOutput?: boolean }) {
+  const cellId = CellId.create();
+  const store = createStore();
+  store.set(
+    notebookAtom,
+    MockNotebook.notebookState({
+      cellData: {
+        [cellId]: { config: { expand_output: opts.expandOutput ?? false } },
+      },
+    }),
+  );
+  store.set(viewStateAtom, { mode: opts.mode, cellAnchor: null });
+
+  const { result } = renderHook(() => useExpandedOutput(cellId), {
+    wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+  });
+
+  return { cellId, store, result };
+}
+
+const configOf = (store: ReturnType<typeof createStore>, cellId: CellId) =>
+  store.get(notebookAtom).cellData[cellId].config;
+
+describe("useExpandedOutput", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("reads the initial state from the cell's expand_output config", () => {
+    expect(setup({ mode: "edit" }).result.current[0]).toBe(false);
+    expect(setup({ mode: "edit", expandOutput: true }).result.current[0]).toBe(
+      true,
+    );
+  });
+
+  it("persists the toggle to the cell's config in edit mode", () => {
+    const { cellId, store, result } = setup({ mode: "edit" });
+
+    act(() => result.current[1](true));
+
+    expect(result.current[0]).toBe(true);
+    expect(configOf(store, cellId).expand_output).toBe(true);
+    expect(saveCellConfig).toHaveBeenCalledWith({
+      configs: { [cellId]: { expand_output: true } },
+    });
+  });
+
+  it("collapses by clearing the config", () => {
+    const { cellId, store, result } = setup({
+      mode: "edit",
+      expandOutput: true,
+    });
+
+    act(() => result.current[1](false));
+
+    expect(result.current[0]).toBe(false);
+    expect(configOf(store, cellId).expand_output).toBe(false);
+    expect(saveCellConfig).toHaveBeenCalledWith({
+      configs: { [cellId]: { expand_output: false } },
+    });
+  });
+
+  it("keeps the toggle in memory outside of edit mode", () => {
+    const { cellId, store, result } = setup({ mode: "read" });
+
+    act(() => result.current[1](true));
+
+    expect(result.current[0]).toBe(true);
+    // Cell configs are read-only outside of edit mode.
+    expect(configOf(store, cellId).expand_output).toBe(false);
+    expect(saveCellConfig).not.toHaveBeenCalled();
+  });
+
+  it("still honors expand_output outside of edit mode", () => {
+    const { result } = setup({ mode: "read", expandOutput: true });
+    expect(result.current[0]).toBe(true);
+  });
+
+  // `expand_output` covers the cell's output area only. Console output is
+  // clamped independently and stays an in-memory, per-session toggle.
+  it("does not touch the config when console output is expanded", () => {
+    const cellId = CellId.create();
+    const store = createStore();
+    store.set(
+      notebookAtom,
+      MockNotebook.notebookState({ cellData: { [cellId]: {} } }),
+    );
+    store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+
+    const { result } = renderHook(() => useExpandedConsoleOutput(cellId), {
+      wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+    });
+
+    act(() => result.current[1](true));
+
+    expect(result.current[0]).toBe(true);
+    expect(configOf(store, cellId).expand_output).toBe(false);
+    expect(saveCellConfig).not.toHaveBeenCalled();
+  });
+});

package/src/core/cells/__tests__/session.test.ts

@@ -59,6 +59,7 @@ describe("notebookStateFromSession", () => {
       column: config?.column ?? null,
       disabled: config?.disabled ?? null,
       hide_code: config?.hide_code ?? null,
+      expand_output: config?.expand_output ?? null,
     },
   });
 
@@ -298,6 +299,7 @@ describe("notebookStateFromSession", () => {
           hide_code: false,
           disabled: false,
           column: null,
+          expand_output: false,
         },
         serializedEditorState: null,
       });
@@ -309,6 +311,7 @@ describe("notebookStateFromSession", () => {
           hide_code: true,
           disabled: true,
           column: 1,
+          expand_output: true,
         }),
       ]);
       const result = notebookStateFromSession(null, notebook);
@@ -319,6 +322,7 @@ describe("notebookStateFromSession", () => {
         hide_code: true,
         disabled: true,
         column: 1,
+        expand_output: true,
       });
     });
 
@@ -350,6 +354,7 @@ describe("notebookStateFromSession", () => {
           hide_code: false,
           disabled: false,
           column: null,
+          expand_output: false,
         },
         serializedEditorState: null,
       });
@@ -386,6 +391,7 @@ describe("notebookStateFromSession", () => {
           hide_code: false,
           disabled: false,
           column: null,
+          expand_output: false,
         },
         serializedEditorState: null,
       });
@@ -426,6 +432,7 @@ describe("notebookStateFromSession", () => {
           hide_code: false,
           disabled: false,
           column: null,
+          expand_output: false,
         },
         serializedEditorState: null,
       });

package/src/core/cells/cells.ts

@@ -125,7 +125,12 @@ export interface NotebookState {
 }
 
 function withScratchCell(notebookState: NotebookState): NotebookState {
-  const config = { column: 0, hide_code: false, disabled: false };
+  const config = {
+    column: 0,
+    hide_code: false,
+    disabled: false,
+    expand_output: false,
+  };
   return {
     ...notebookState,
     cellData: {

package/src/core/cells/document-changes.ts

@@ -164,6 +164,7 @@ function columnChanges(
         column: newCol,
         disabled: cell?.config.disabled ?? false,
         hideCode: cell?.config.hide_code ?? false,
+        expandOutput: cell?.config.expand_output ?? false,
       });
     }
   }
@@ -277,6 +278,7 @@ export function toDocumentChanges(
           column: cell.config.column ?? null,
           disabled: cell.config.disabled ?? false,
           hideCode: cell.config.hide_code ?? false,
+          expandOutput: cell.config.expand_output ?? false,
         },
       ];
     }
@@ -452,7 +454,11 @@ export function fromDocumentChanges(
             payload: { cellId: change.cellId, name: change.name },
           });
         }
-        if (change.config?.disabled != null || change.config?.column != null) {
+        if (
+          change.config?.disabled != null ||
+          change.config?.column != null ||
+          change.config?.expand_output != null
+        ) {
           actions.push({
             type: "updateCellConfig",
             payload: {
@@ -464,6 +470,9 @@ export function fromDocumentChanges(
                 ...(change.config.column != null && {
                   column: change.config.column,
                 }),
+                ...(change.config.expand_output != null && {
+                  expand_output: change.config.expand_output,
+                }),
               },
             },
           });
@@ -560,6 +569,7 @@ export function fromDocumentChanges(
               column: change.column,
               disabled: change.disabled,
               hide_code: change.hideCode,
+              expand_output: change.expandOutput,
             },
           },
         });

package/src/core/cells/outputs.ts

@@ -1,34 +1,91 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useEffect, useState } from "react";
+import { useAtomValue } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { useEffect, useMemo, useState } from "react";
+import { useEvent } from "@/hooks/useEvent";
+import { Logger } from "@/utils/Logger";
 import type { OutputMessage } from "../kernel/messages";
+import { viewStateAtom } from "../mode";
+import { getRequestClient } from "../network/requests";
+import { cellDataAtom, useCellActions } from "./cells";
 import type { CellId } from "./ids";
 
 // This does not need to be overcomplicated. We can just store the expanded
 // state in a global map instead of Jotai since state is not shared between cells.
+// The output area only falls back to its map where the `expand_output` config
+// cannot be edited; see `useExpandedOutput`.
 const expandedOutputs: Record<CellId, boolean> = {};
 const expandedConsoleOutputs: Record<CellId, boolean> = {};
 
+/**
+ * Whether a cell's output is shown in full, instead of clamped to a fixed
+ * height. Covers the cell's output area only; console output is clamped
+ * independently, via `useExpandedConsoleOutput`.
+ *
+ * In edit mode, we toggle the cell's `expand_output` config, so the choice is persisted.
+ */
 export function useExpandedOutput(cellId: CellId) {
-  const [state, setState] = useState(expandedOutputs[cellId] ?? false);
+  const { mode } = useAtomValue(viewStateAtom);
+  const { updateCellConfig } = useCellActions();
+  // Select just the flag: every output would otherwise re-render on each
+  // keystroke in its cell.
+  const isConfigExpanded = useAtomValue(
+    useMemo(
+      () =>
+        selectAtom(
+          cellDataAtom(cellId),
+          (data) => data?.config.expand_output ?? false,
+          Object.is,
+        ),
+      [cellId],
+    ),
+  );
+  const [isSessionExpanded, setIsSessionExpanded] = useState(
+    () => expandedOutputs[cellId] ?? isConfigExpanded,
+  );
 
   // Sync state to external storage
   useEffect(() => {
-    expandedOutputs[cellId] = state;
-  }, [cellId, state]);
+    expandedOutputs[cellId] = isSessionExpanded;
+  }, [cellId, isSessionExpanded]);
 
-  return [state, setState] as const;
+  const isEditable = mode === "edit";
+  const isExpanded = isEditable ? isConfigExpanded : isSessionExpanded;
+
+  const setIsExpanded = useEvent((expanded: boolean) => {
+    setIsSessionExpanded(expanded);
+    if (!isEditable) {
+      return;
+    }
+    const config = { expand_output: expanded };
+    updateCellConfig({ cellId, config });
+    getRequestClient()
+      .saveCellConfig({ configs: { [cellId]: config } })
+      .catch((error) => {
+        Logger.error("Failed to save expand_output config", error);
+      });
+  });
+
+  return [isExpanded, setIsExpanded] as const;
 }
 
+/**
+ * Whether a cell's console output is shown in full. Deliberately not backed by
+ * `expand_output`: that config covers the cell's output area only, so console
+ * output stays a per-session, in-memory toggle.
+ */
 export function useExpandedConsoleOutput(cellId: CellId) {
-  const [state, setState] = useState(expandedConsoleOutputs[cellId] ?? false);
+  const [isExpanded, setIsExpanded] = useState(
+    expandedConsoleOutputs[cellId] ?? false,
+  );
 
   // Sync state to external storage
   useEffect(() => {
-    expandedConsoleOutputs[cellId] = state;
-  }, [cellId, state]);
+    expandedConsoleOutputs[cellId] = isExpanded;
+  }, [cellId, isExpanded]);
 
-  return [state, setState] as const;
+  return [isExpanded, setIsExpanded] as const;
 }
 
 export function isOutputEmpty(

package/src/core/cells/session.ts

@@ -149,6 +149,7 @@ function createEmptyNotebookCell(): NotebookCell {
       column: null,
       disabled: false,
       hide_code: false,
+      expand_output: false,
     },
   };
 }
@@ -177,6 +178,7 @@ function createCellDataFromNotebook(
       column: notebookCell.config?.column ?? null,
       disabled: notebookCell.config?.disabled ?? false,
       hide_code: notebookCell.config?.hide_code ?? false,
+      expand_output: notebookCell.config?.expand_output ?? false,
     },
     serializedEditorState: null,
   };

package/src/core/cells/types.ts

@@ -27,6 +27,7 @@ export function createCell({
       hide_code: false,
       disabled: false,
       column: null,
+      expand_output: false,
     },
     name: name,
     code: code,
@@ -42,6 +43,7 @@ export function createCellConfig(config?: Partial<CellConfig>): CellConfig {
     hide_code: false,
     disabled: false,
     column: null,
+    expand_output: false,
     ...config,
   };
 }

package/dist/assets/has-Bpddg3XQ.js

@@ -1 +0,0 @@
-import{Ka as e}from"./index-BtFkx6qT.js";var t=Object.prototype.hasOwnProperty;function n(e,n){return e!=null&&t.call(e,n)}function r(t,r){return t!=null&&e(t,r,n)}export{r as t};