@marimo-team/frontend 0.19.10-dev4 → 0.19.10-dev40

package/src/components/data-table/download-actions.tsx

@@ -14,6 +14,7 @@ import { logNever } from "@/utils/assertNever";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadByURL } from "@/utils/download";
 import { prettyError } from "@/utils/errors";
+import { Filenames } from "@/utils/filenames";
 import {
   jsonParseWithSpecialChar,
   jsonToMarkdown,
@@ -36,6 +37,7 @@ type DownloadFormat = "csv" | "json" | "parquet";
 
 export interface DownloadActionProps {
   downloadAs: (req: { format: DownloadFormat }) => Promise<string>;
+  downloadFileName?: string;
 }
 
 const options = [
@@ -158,7 +160,10 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
             onSelect={async () => {
               const downloadUrl = await getDownloadUrl(option.format);
               const ext = option.format;
-              downloadByURL(downloadUrl, `download.${ext}`);
+              const rawName = (props.downloadFileName ?? "").trim();
+              const baseName =
+                Filenames.withoutExtension(rawName) || "download";
+              downloadByURL(downloadUrl, `${baseName}.${ext}`);
             }}
           >
             <option.icon className="mo-dropdown-icon" />

package/src/components/dependency-graph/dependency-graph-tree.tsx

@@ -58,6 +58,7 @@ export const DependencyGraphTree: React.FC<PropsWithChildren<Props>> = ({
       cellAtoms,
       variables,
       settings.hidePureMarkdown,
+      settings.hideReusableFunctions,
     );
     elements = layoutElements({
       nodes: elements.nodes,
@@ -94,9 +95,17 @@ export const DependencyGraphTree: React.FC<PropsWithChildren<Props>> = ({
         cellAtoms,
         variables,
         settings.hidePureMarkdown,
+        settings.hideReusableFunctions,
       ),
     );
-  }, [cellIds, variables, cellAtoms, syncChanges, settings.hidePureMarkdown]);
+  }, [
+    cellIds,
+    variables,
+    cellAtoms,
+    syncChanges,
+    settings.hidePureMarkdown,
+    settings.hideReusableFunctions,
+  ]);
 
   const [selection, setSelection] = useState<GraphSelection>();
   useFitToViewOnDimensionChange();

package/src/components/dependency-graph/dependency-graph.tsx

@@ -24,6 +24,7 @@ interface Props {
 const graphViewAtom = atom<LayoutDirection>("TB");
 const graphViewSettings = atom<GraphSettings>({
   hidePureMarkdown: true,
+  hideReusableFunctions: false,
 });
 
 export const DependencyGraph: React.FC<Props> = (props) => {

package/src/components/dependency-graph/elements.ts

@@ -2,6 +2,7 @@
 
 import type { Atom } from "jotai";
 import { type Edge, MarkerType, type Node, type NodeProps } from "reactflow";
+import { getNotebook } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import type { CellData } from "@/core/cells/types";
 import { store } from "@/core/state/jotai";
@@ -29,6 +30,7 @@ interface ElementsBuilder {
     cellAtoms: Atom<CellData>[],
     variables: Variables,
     hidePureMarkdown: boolean,
+    hideReusableFunctions: boolean,
   ) => { nodes: Node<NodeData>[]; edges: Edge[] };
 }
 
@@ -76,6 +78,7 @@ export class VerticalElementsBuilder implements ElementsBuilder {
     cellAtoms: Atom<CellData>[],
     variables: Variables,
     _hidePureMarkdown: boolean,
+    _hideReusableFunctions: boolean,
   ) {
     let prevY = 0;
     const nodes: Node<NodeData>[] = [];
@@ -143,6 +146,7 @@ export class TreeElementsBuilder implements ElementsBuilder {
     cellAtoms: Atom<CellData>[],
     variables: Variables,
     hidePureMarkdown: boolean,
+    hideReusableFunctions: boolean,
   ) {
     const nodes: Node<NodeData>[] = [];
     const edges: Edge[] = [];
@@ -171,18 +175,25 @@ export class TreeElementsBuilder implements ElementsBuilder {
       }
     }
 
-    for (const [cellId, cellAtom] of Arrays.zip(cellIds, cellAtoms)) {
-      // Show every cell
-      if (!hidePureMarkdown) {
-        nodes.push(this.createNode(cellId, cellAtom));
-      }
+    const cellRuntime = getNotebook().cellRuntime;
 
+    for (const [cellId, cellAtom] of Arrays.zip(cellIds, cellAtoms)) {
+      const code = store.get(cellAtom).code.trim();
       const hasEdge = nodesWithEdges.has(cellId);
-      const isMarkdown = store.get(cellAtom).code.trim().startsWith("mo.md");
-      // Show only cells with edges or non-markdown cells
-      if (hasEdge || !isMarkdown) {
-        nodes.push(this.createNode(cellId, cellAtom));
+      const isMarkdown = code.startsWith("mo.md");
+      const runtime = cellRuntime[cellId];
+      const isReusable = runtime?.serialization?.toLowerCase() === "valid";
+
+      // Apply filters
+      if (hidePureMarkdown && isMarkdown && !hasEdge) {
+        continue;
+      }
+      if (hideReusableFunctions && isReusable && !hasEdge) {
+        continue;
       }
+
+      // Show every cell that wasn't filtered out
+      nodes.push(this.createNode(cellId, cellAtom));
     }
 
     return { nodes, edges };

package/src/components/dependency-graph/panels.tsx

@@ -43,7 +43,8 @@ export const GraphToolbar: React.FC<Props> = memo(
       onSettingsChange({ ...settings, [key]: value });
     };
 
-    const checkboxId = useId();
+    const markdownCheckboxId = useId();
+    const functionsCheckboxId = useId();
 
     const settingsButton = (
       <Popover>
@@ -54,16 +55,31 @@ export const GraphToolbar: React.FC<Props> = memo(
         </PopoverTrigger>
         <PopoverContent className="w-auto p-2 text-muted-foreground">
           <div className="font-semibold pb-4">Settings</div>
-          <div className="flex items-center gap-2">
-            <Checkbox
-              data-testid="hide-pure-markdown-checkbox"
-              id={checkboxId}
-              checked={settings.hidePureMarkdown}
-              onCheckedChange={(checked) =>
-                handleSettingChange("hidePureMarkdown", Boolean(checked))
-              }
-            />
-            <Label htmlFor={checkboxId}>Hide pure markdown</Label>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                data-testid="hide-pure-markdown-checkbox"
+                id={markdownCheckboxId}
+                checked={settings.hidePureMarkdown}
+                onCheckedChange={(checked) =>
+                  handleSettingChange("hidePureMarkdown", Boolean(checked))
+                }
+              />
+              <Label htmlFor={markdownCheckboxId}>Hide pure markdown</Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                data-testid="hide-reusable-functions-checkbox"
+                id={functionsCheckboxId}
+                checked={settings.hideReusableFunctions}
+                onCheckedChange={(checked) =>
+                  handleSettingChange("hideReusableFunctions", Boolean(checked))
+                }
+              />
+              <Label htmlFor={functionsCheckboxId}>
+                Hide reusable functions
+              </Label>
+            </div>
           </div>
         </PopoverContent>
       </Popover>

package/src/components/dependency-graph/types.ts

@@ -17,4 +17,5 @@ export type GraphSelection =
 
 export interface GraphSettings {
   hidePureMarkdown: boolean;
+  hideReusableFunctions: boolean;
 }

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -226,7 +226,9 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
 
   const helperResizeHandle = (
     <PanelResizeHandle
+      disabled={!isSidebarOpen}
       onDragging={handleDragging}
+      hitAreaMargins={{ coarse: 15, fine: 2 }}
       className={cn(
         "border-border print:hidden z-10",
         isSidebarOpen ? "resize-handle" : "resize-handle-collapsed",
@@ -237,6 +239,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
 
   const panelResizeHandle = (
     <PanelResizeHandle
+      disabled={!isDeveloperPanelOpen}
       onDragging={handleDragging}
       className={cn(
         "border-border print:hidden z-20",
@@ -281,7 +284,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const helpPaneBody = (
     <ErrorBoundary>
       <PanelSectionProvider value="sidebar">
-        <div className="flex flex-col h-full flex-1 overflow-hidden mr-[-4px]">
+        <div className="flex flex-col h-full flex-1 overflow-hidden">
           <div className="p-3 border-b flex justify-between items-center">
             {selectedPanel === "dependencies" ? (
               <div className="flex items-center justify-between flex-1">

package/src/components/editor/package-alert.tsx

@@ -96,10 +96,10 @@ export const PackageAlert: React.FC = () => {
 
   if (isMissingPackageAlert(packageAlert)) {
     return (
-      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px]">
+      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px] pointer-events-none">
         <Banner
           kind="danger"
-          className="flex flex-col rounded py-3 px-5 animate-in slide-in-from-left overflow-auto max-h-[80vh] scrollbar-thin"
+          className="flex flex-col rounded py-3 px-5 animate-in slide-in-from-left overflow-auto max-h-[80vh] scrollbar-thin pointer-events-auto"
         >
           <div className="flex justify-between">
             <span className="font-bold text-lg flex items-center mb-2">
@@ -207,10 +207,10 @@ export const PackageAlert: React.FC = () => {
     }
 
     return (
-      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px] ">
+      <div className="flex flex-col gap-4 mb-5 fixed top-5 left-12 min-w-[400px] z-200 opacity-95 max-w-[600px] pointer-events-none">
         <Banner
           kind={status === "failed" ? "danger" : "info"}
-          className="flex flex-col rounded pt-3 pb-4 px-5 overflow-auto max-h-[80vh] scrollbar-thin"
+          className="flex flex-col rounded pt-3 pb-4 px-5 overflow-auto max-h-[80vh] scrollbar-thin pointer-events-auto"
         >
           <div className="flex justify-between">
             <span className="font-bold text-lg flex items-center mb-2">

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -172,11 +172,9 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
   // spacing is handled elsewhere
   return (
     <VerticalLayoutWrapper invisible={invisible} appConfig={appConfig}>
-      {showCode && canShowCode ? (
-        <div className="flex flex-col gap-5"> {renderCells()}</div>
-      ) : (
-        renderCells()
-      )}
+      <div className={cn("flex flex-col", showCode && canShowCode && "gap-5")}>
+        {renderCells()}
+      </div>
       {mode === "read" && (
         <ActionButtons
           canShowCode={canShowCode}

package/src/core/codemirror/misc/__tests__/paste.test.ts

@@ -140,6 +140,24 @@ def _(
     expect(extractCells(input)).toEqual(["x = a + b + c"]);
   });
 
+  it("preserves return statements inside nested functions", () => {
+    const input = `
+@app.cell
+def _(mo, px):
+    def make_fig():
+        data = {'category': ['foo', 'bar'], 'value': [10, 20]}
+        fig = px.bar(data, x='category', y='value')
+        return fig
+
+    fig = make_fig()
+    mo.ui.plotly(fig)
+    return
+`;
+    expect(extractCells(input)).toEqual([
+      "def make_fig():\n    data = {'category': ['foo', 'bar'], 'value': [10, 20]}\n    fig = px.bar(data, x='category', y='value')\n    return fig\n\nfig = make_fig()\nmo.ui.plotly(fig)",
+    ]);
+  });
+
   it("handles cells with config", () => {
     const input = `
 @app.cell(hide_code=True, column=2)

package/src/core/codemirror/misc/paste.ts

@@ -42,6 +42,7 @@ export function extractCells(text: string): string[] {
   let inMultilineArgs = false;
   let inMultilineReturn = false;
   let parenCount = 0;
+  let cellBaseIndent: number | null = null;
 
   // Pre-compile regex patterns
   const leadingParenRegex = /\(/g;
@@ -55,19 +56,16 @@ export function extractCells(text: string): string[] {
     );
   }
 
+  function getIndent(line: string): number {
+    const match = line.match(/^\s*/);
+    return match ? match[0].length : 0;
+  }
+
   function finalizeCellIfNeeded() {
     if (currentCell.length === 0) {
       return;
     }
 
-    // Remove trailing returns
-    while (
-      currentCell.length > 0 &&
-      currentCell[currentCell.length - 1].trim().startsWith("return")
-    ) {
-      currentCell.pop();
-    }
-
     // Only add non-empty cells
     if (currentCell.some((l) => l.trim() !== "")) {
       cells.push(dedent(currentCell.join("\n")));
@@ -88,6 +86,7 @@ export function extractCells(text: string): string[] {
       finalizeCellIfNeeded();
       inCell = true;
       skipLines = 1; // Skip the def line
+      cellBaseIndent = null;
       continue;
     }
 
@@ -125,8 +124,13 @@ export function extractCells(text: string): string[] {
       continue;
     }
 
-    // Handle return statements
-    if (trimmed.startsWith("return")) {
+    // Detect base indentation of cell body from first content line
+    if (cellBaseIndent === null && trimmed) {
+      cellBaseIndent = getIndent(line);
+    }
+
+    // Handle return statements — only strip cell-level returns
+    if (trimmed.startsWith("return") && getIndent(line) === cellBaseIndent) {
       if (trimmed.includes("(") && !trimmed.endsWith(")")) {
         inMultilineReturn = true;
         parenCount = countParens(trimmed);

package/src/core/wasm/__tests__/store.test.ts

@@ -1,9 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it, vi } from "vitest";
+import { codeAtom } from "../../saving/file-state";
+import { store } from "../../state/jotai";
 import {
   CompositeFileStore,
   domElementFileStore,
   localStorageFileStore,
+  mountConfigFileStore,
+  notebookFileStore,
 } from "../store";
 
 describe("localStorageFileStore", () => {
@@ -53,3 +57,32 @@ describe("CompositeFileStore", () => {
     expect(saved).toHaveBeenCalledTimes(3);
   });
 });
+
+describe("mountConfigFileStore", () => {
+  it("returns null when no code is set", () => {
+    store.set(codeAtom, undefined);
+    expect(mountConfigFileStore.readFile()).toBeNull();
+  });
+
+  it("returns code when set", () => {
+    store.set(codeAtom, "print('hello')");
+    expect(mountConfigFileStore.readFile()).toBe("print('hello')");
+  });
+
+  it("does not save files", () => {
+    store.set(codeAtom, "original");
+    mountConfigFileStore.saveFile("new content");
+    expect(mountConfigFileStore.readFile()).toBe("original");
+  });
+});
+
+describe("notebookFileStore priority", () => {
+  it("prefers mount config over marimo-code and URL", () => {
+    store.set(codeAtom, "mount config code");
+    const element = document.createElement("marimo-code");
+    element.textContent = "marimo-code element";
+    document.body.replaceChildren(element);
+
+    expect(notebookFileStore.readFile()).toBe("mount config code");
+  });
+});

package/src/core/wasm/bridge.ts

@@ -29,6 +29,7 @@ import type {
   SaveUserConfigurationRequest,
   Snippets,
 } from "../network/types";
+import { filenameAtom } from "../saving/file-state";
 import { store } from "../state/jotai";
 import { BasicTransport } from "../websocket/transports/basic";
 import type { IConnectionTransport } from "../websocket/transports/transport";
@@ -146,7 +147,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
 
     const code = await notebookFileStore.readFile();
     const fallbackCode = await fallbackFileStore.readFile();
-    const filename = PyodideRouter.getFilename();
+    const filename = store.get(filenameAtom) ?? PyodideRouter.getFilename();
     const userConfig = store.get(userConfigAtom);
 
     const queryParameters: Record<string, string | string[]> = {};

package/src/core/wasm/store.ts

@@ -4,6 +4,8 @@ import {
   compressToEncodedURIComponent,
   decompressFromEncodedURIComponent,
 } from "lz-string";
+import { codeAtom } from "@/core/saving/file-state";
+import { store } from "@/core/state/jotai";
 import { TypedLocalStorage } from "@/utils/storage/typed";
 import { PyodideRouter } from "./router";
 
@@ -67,6 +69,15 @@ const remoteDefaultFileStore: FileStore = {
   },
 };
 
+export const mountConfigFileStore: FileStore = {
+  saveFile(_contents: string) {
+    // Read-only: mount config code is set via codeAtom
+  },
+  readFile() {
+    return store.get(codeAtom) ?? null;
+  },
+};
+
 const emptyFileStore: FileStore = {
   saveFile(contents: string) {
     // Do nothing
@@ -112,7 +123,8 @@ export class CompositeFileStore implements FileStore {
 }
 
 export const notebookFileStore = new CompositeFileStore([
-  // Prefer <marimo-code>, then URL
+  // Prefer mount config, then <marimo-code>, then URL
+  mountConfigFileStore,
   domElementFileStore,
   urlFileStore,
 ]);

package/src/plugins/impl/DataTablePlugin.tsx

@@ -195,6 +195,7 @@ interface Data<T> {
   hasStableRowId: boolean;
   lazy: boolean;
   cellHoverTexts?: Record<string, Record<string, string | null>> | null;
+  downloadFileName?: string;
 }
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -278,6 +279,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       // If lazy, this will preload the first page of data
       // without user confirmation.
       preload: z.boolean().default(false),
+      downloadFileName: z.string().optional(),
     }),
   )
   .withFunctions<DataTableFunctions>({
@@ -752,6 +754,7 @@ const DataTableComponent = ({
   cellStyles,
   hoverTemplate,
   cellHoverTexts,
+  downloadFileName,
   toggleDisplayHeader,
   calculate_top_k_rows,
   preview_column,
@@ -981,6 +984,7 @@ const DataTableComponent = ({
             hoverTemplate={hoverTemplate}
             cellHoverTexts={cellHoverTexts}
             downloadAs={showDownload ? downloadAs : undefined}
+            downloadFileName={downloadFileName}
             enableSearch={enableSearch}
             searchQuery={searchQuery}
             onSearchQueryChange={setSearchQuery}

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -47,6 +47,7 @@ export const ChatPlugin = createPlugin<{ messages: UIMessage[] }>(
       maxHeight: z.number().optional(),
       config: configSchema,
       allowAttachments: z.union([z.boolean(), z.string().array()]),
+      disabled: z.boolean().default(false),
     }),
   )
   .withFunctions<PluginFunctions>({
@@ -76,6 +77,7 @@ export const ChatPlugin = createPlugin<{ messages: UIMessage[] }>(
           showConfigurationControls={props.data.showConfigurationControls}
           maxHeight={props.data.maxHeight}
           allowAttachments={props.data.allowAttachments}
+          disabled={props.data.disabled}
           config={props.data.config}
           get_chat_history={props.functions.get_chat_history}
           delete_chat_history={props.functions.delete_chat_history}

package/src/plugins/impl/chat/chat-ui.tsx

@@ -67,6 +67,7 @@ interface Props extends PluginFunctions {
   showConfigurationControls: boolean;
   maxHeight: number | undefined;
   allowAttachments: boolean | string[];
+  disabled: boolean;
   value: UIMessage[];
   setValue: (messages: UIMessage[]) => void;
   host: HTMLElement;
@@ -450,6 +451,9 @@ export const Chatbot: React.FC<Props> = (props) => {
       <form
         onSubmit={async (evt) => {
           evt.preventDefault();
+          if (props.disabled) {
+            return;
+          }
 
           const fileParts = files
             ? await convertToFileUIPart(files)
@@ -462,7 +466,12 @@ export const Chatbot: React.FC<Props> = (props) => {
           resetInput();
         }}
         ref={formRef}
-        className="flex w-full border-t border-(--slate-6) px-2 py-1 items-center"
+        // biome-ignore lint/a11y/useSemanticElements: inert is used to disable the entire form
+        inert={props.disabled || undefined}
+        className={cn(
+          "flex w-full border-t border-(--slate-6) px-2 py-1 items-center",
+          props.disabled && "opacity-50 cursor-not-allowed",
+        )}
       >
         {props.showConfigurationControls && (
           <ConfigPopup config={config} onChange={setConfig} />

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -48,6 +48,7 @@ type TableData<T> = T[] | CsvURL;
 interface Data {
   label?: string | null;
   columns: ColumnDataTypes;
+  dataframeName?: string;
   pageSize: number;
   showDownload: boolean;
   lazy: boolean;
@@ -93,6 +94,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
       label: z.string().nullish(),
       pageSize: z.number().default(5),
       showDownload: z.boolean().default(true),
+      dataframeName: z.string().optional(),
       columns: z
         .array(z.tuple([z.string().or(z.number()), z.string(), z.string()]))
         .transform((value) => {
@@ -176,6 +178,7 @@ const EMPTY: Transformations = {
 export const DataFrameComponent = memo(
   ({
     columns,
+    dataframeName,
     pageSize,
     showDownload,
     lazy,
@@ -326,6 +329,7 @@ export const DataFrameComponent = memo(
           fieldTypes={field_types}
           rowHeaders={row_headers || Arrays.EMPTY}
           showDownload={showDownload}
+          downloadFileName={dataframeName}
           download_as={download_as}
           enableSearch={false}
           showFilters={false}