@marimo-team/islands 0.19.7-dev1 → 0.19.7-dev15

package/src/components/chat/chat-panel.tsx

@@ -435,7 +435,11 @@ const ChatPanel = () => {
         title="Chat with AI"
         description="No AI provider configured or model selected"
         action={
-          <Button variant="outline" size="sm" onClick={() => handleClick("ai")}>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => handleClick("ai", "ai-providers")}
+          >
             Edit AI settings
           </Button>
         }

package/src/components/editor/chrome/panels/dependency-graph-panel.tsx

@@ -1,30 +1,66 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type React from "react";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useCellDataAtoms, useCellIds } from "@/core/cells/cells";
 import { useVariables } from "@/core/variables/state";
 import { cn } from "@/utils/cn";
 import { DependencyGraph } from "../../../dependency-graph/dependency-graph";
 import { MinimapContent } from "../../../dependency-graph/minimap-content";
 import { useDependencyPanelTab } from "../wrapper/useDependencyPanelTab";
+import { usePanelSection } from "./panel-context";
 
 const DependencyGraphPanel: React.FC = () => {
-  const { dependencyPanelTab } = useDependencyPanelTab();
+  const { dependencyPanelTab, setDependencyPanelTab } = useDependencyPanelTab();
   const variables = useVariables();
   const cellIds = useCellIds();
   const [cells] = useCellDataAtoms();
+  const panelSection = usePanelSection();
+
+  // Show toggle inside panel when in developer panel (horizontal layout)
+  // since the sidebar has its own header with the toggle
+  const showInlineToggle = panelSection === "developer-panel";
 
   return (
-    <div className={cn("w-full h-full flex-1 mx-auto -mb-4 relative")}>
-      {dependencyPanelTab === "minimap" ? (
-        <MinimapContent />
-      ) : (
-        <DependencyGraph
-          cellAtoms={cells}
-          variables={variables}
-          cellIds={cellIds.inOrderIds}
-        />
+    <div className={cn("w-full h-full flex-1 mx-auto -mb-4 flex flex-col")}>
+      {showInlineToggle && (
+        <div className="p-2 shrink-0">
+          <Tabs
+            value={dependencyPanelTab}
+            onValueChange={(value) => {
+              if (value === "minimap" || value === "graph") {
+                setDependencyPanelTab(value);
+              }
+            }}
+          >
+            <TabsList>
+              <TabsTrigger
+                value="minimap"
+                className="py-0.5 text-xs uppercase tracking-wide font-bold"
+              >
+                Minimap
+              </TabsTrigger>
+              <TabsTrigger
+                value="graph"
+                className="py-0.5 text-xs uppercase tracking-wide font-bold"
+              >
+                Graph
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
       )}
+      <div className="flex-1 min-h-0 relative">
+        {dependencyPanelTab === "minimap" ? (
+          <MinimapContent />
+        ) : (
+          <DependencyGraph
+            cellAtoms={cells}
+            variables={variables}
+            cellIds={cellIds.inOrderIds}
+          />
+        )}
+      </div>
     </div>
   );
 };

package/src/core/export/hooks.ts

@@ -132,7 +132,7 @@ export function useEnrichCellOutputs() {
     const results = await Promise.all(
       cellsToCaptureScreenshot.map(async ([cellId]) => {
         try {
-          const dataUrl = await getImageDataUrlForCell(cellId);
+          const dataUrl = await getImageDataUrlForCell(cellId, false);
           if (!dataUrl) {
             Logger.error(`Failed to capture screenshot for cell ${cellId}`);
             return null;

package/src/plugins/impl/plotly/PlotlyPlugin.tsx

@@ -7,15 +7,14 @@ import { Logger } from "@/utils/Logger";
 
 import "./plotly.css";
 import "./mapbox.css";
-import { usePrevious } from "@uidotdev/usehooks";
-import { isEqual, pick, set } from "lodash-es";
-import { type JSX, lazy, memo, useEffect, useMemo, useState } from "react";
+import { pick, set } from "lodash-es";
+import { type JSX, lazy, memo, useMemo } from "react";
 import useEvent from "react-use-event-hook";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useScript } from "@/hooks/useScript";
 import { Arrays } from "@/utils/arrays";
-import { Objects } from "@/utils/objects";
 import { createParser, type PlotlyTemplateParser } from "./parse-from-template";
+import { usePlotlyLayout } from "./usePlotlyLayout";
 
 interface Data {
   figure: Figure;
@@ -80,18 +79,6 @@ export const LazyPlot = lazy(() =>
   }),
 );
 
-function initialLayout(figure: Figure): Partial<Plotly.Layout> {
-  // Enable autosize if width is not specified
-  const shouldAutoSize = figure.layout.width === undefined;
-  return {
-    autosize: shouldAutoSize,
-    dragmode: "select",
-    height: 540,
-    // Prioritize user's config
-    ...figure.layout,
-  };
-}
-
 const SUNBURST_DATA_KEYS: (keyof Plotly.SunburstPlotDatum)[] = [
   "color",
   "curveNumber",
@@ -111,38 +98,20 @@ const TREE_MAP_DATA_KEYS = SUNBURST_DATA_KEYS;
 
 export const PlotlyComponent = memo(
   ({ figure: originalFigure, value, setValue, config }: PlotlyPluginProps) => {
-    const [figure, setFigure] = useState(() => {
-      // We clone the figure since Plotly mutates the figure in place
-      return structuredClone(originalFigure);
-    });
-
     // Used for rendering LaTeX. TODO: Serve this library from Marimo
     const scriptStatus = useScript(
       "https://cdn.jsdelivr.net/npm/mathjax-full@3.2.2/es5/tex-mml-svg.min.js",
     );
     const isScriptLoaded = scriptStatus === "ready";
 
-    useEffect(() => {
-      const nextFigure = structuredClone(originalFigure);
-      setFigure(nextFigure);
-      setLayout((prev) => ({
-        ...initialLayout(nextFigure),
-        ...prev,
-      }));
-    }, [originalFigure, isScriptLoaded]);
-
-    const [layout, setLayout] = useState<Partial<Plotly.Layout>>(() => {
-      return {
-        ...initialLayout(figure),
-        // Override with persisted values (dragmode, xaxis, yaxis)
-        ...value,
-      };
+    const { figure, layout, handleReset } = usePlotlyLayout({
+      originalFigure,
+      initialValue: value,
+      isScriptLoaded,
     });
 
-    const handleReset = useEvent(() => {
-      const nextFigure = structuredClone(originalFigure);
-      setFigure(nextFigure);
-      setLayout(initialLayout(nextFigure));
+    const handleResetWithClear = useEvent(() => {
+      handleReset();
       setValue({});
     });
 
@@ -163,37 +132,13 @@ export const PlotlyComponent = memo(
                 <path d="M3 3v5h5" />
               </svg>`,
             },
-            click: handleReset,
+            click: handleResetWithClear,
           },
         ],
         // Prioritize user's config
         ...configMemo,
       };
-    }, [handleReset, configMemo]);
-
-    const prevFigure = usePrevious(figure) ?? figure;
-
-    useEffect(() => {
-      const omitKeys = new Set<keyof Plotly.Layout>([
-        "autosize",
-        "dragmode",
-        "xaxis",
-        "yaxis",
-      ]);
-
-      // If the key was updated externally (e.g. can be specifically passed in the config)
-      // then we need to update the layout
-      for (const key of omitKeys) {
-        if (!isEqual(figure.layout[key], prevFigure.layout[key])) {
-          omitKeys.delete(key);
-        }
-      }
-
-      // Update layout when figure.layout changes
-      // Omit keys that we don't want to override
-      const layout = Objects.omit(figure.layout, omitKeys);
-      setLayout((prev) => ({ ...prev, ...layout }));
-    }, [figure.layout, prevFigure.layout]);
+    }, [handleResetWithClear, configMemo]);
 
     return (
       <LazyPlot

package/src/plugins/impl/plotly/__tests__/usePlotlyLayout.test.ts

@@ -0,0 +1,113 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { Figure } from "react-plotly.js";
+import { describe, expect, it } from "vitest";
+import {
+  computeLayoutOnFigureChange,
+  computeLayoutUpdate,
+  computeOmitKeys,
+  createInitialLayout,
+} from "../usePlotlyLayout";
+
+function createFigure(layoutOverrides: Partial<Plotly.Layout> = {}): Figure {
+  return {
+    data: [],
+    layout: { ...layoutOverrides } as Plotly.Layout,
+    frames: null,
+  };
+}
+
+describe("createInitialLayout", () => {
+  it("sets defaults and merges figure layout", () => {
+    const figure = createFigure({ title: { text: "Test" }, dragmode: "zoom" });
+    const result = createInitialLayout(figure);
+
+    expect(result.autosize).toBe(true);
+    expect(result.height).toBe(540);
+    expect(result.dragmode).toBe("zoom"); // figure overrides default
+    expect(result.title).toEqual({ text: "Test" });
+  });
+
+  it("disables autosize when width is specified", () => {
+    const result = createInitialLayout(createFigure({ width: 800 }));
+    expect(result.autosize).toBe(false);
+  });
+});
+
+describe("computeLayoutOnFigureChange", () => {
+  it("preserves only dragmode/xaxis/yaxis from previous layout (#7964)", () => {
+    const nextFigure = createFigure({ title: { text: "New" } });
+    const prevLayout: Partial<Plotly.Layout> = {
+      dragmode: "zoom",
+      xaxis: { range: [0, 10] },
+      yaxis: { range: [0, 100] },
+      shapes: [{ type: "rect", x0: 0, x1: 1, y0: 0, y1: 1 }],
+      annotations: [{ text: "Old", x: 0, y: 0 }],
+    };
+
+    const result = computeLayoutOnFigureChange(nextFigure, prevLayout);
+
+    // Preserved from prev
+    expect(result.dragmode).toBe("zoom");
+    expect(result.xaxis).toEqual({ range: [0, 10] });
+    expect(result.yaxis).toEqual({ range: [0, 100] });
+    // From new figure
+    expect(result.title).toEqual({ text: "New" });
+    // NOT preserved (the bug fix)
+    expect(result.shapes).toBeUndefined();
+    expect(result.annotations).toBeUndefined();
+  });
+
+  it("uses shapes from new figure, not previous layout", () => {
+    const nextFigure = createFigure({
+      shapes: [{ type: "circle", x0: 0, x1: 1, y0: 0, y1: 1 }],
+    });
+    const prevLayout: Partial<Plotly.Layout> = {
+      shapes: [{ type: "rect", x0: 0, x1: 1, y0: 0, y1: 1 }],
+    };
+
+    const result = computeLayoutOnFigureChange(nextFigure, prevLayout);
+
+    expect(result.shapes).toHaveLength(1);
+    expect(result.shapes?.[0].type).toBe("circle");
+  });
+});
+
+describe("computeOmitKeys", () => {
+  it("omits user-interaction keys unless they changed in figure", () => {
+    const unchanged = computeOmitKeys({}, {});
+    expect([...unchanged]).toEqual(
+      expect.arrayContaining(["autosize", "dragmode", "xaxis", "yaxis"]),
+    );
+
+    const changed = computeOmitKeys(
+      { dragmode: "zoom", xaxis: { range: [0, 10] } },
+      { dragmode: "select", xaxis: { range: [0, 5] } },
+    );
+    expect(changed.has("dragmode")).toBe(false);
+    expect(changed.has("xaxis")).toBe(false);
+    expect(changed.has("autosize")).toBe(true);
+  });
+});
+
+describe("computeLayoutUpdate", () => {
+  it("merges figure layout while respecting omit keys", () => {
+    // dragmode unchanged in figure -> preserve prev layout's dragmode
+    const result1 = computeLayoutUpdate(
+      { dragmode: "pan", title: { text: "New" } },
+      { dragmode: "pan" },
+      { dragmode: "zoom", height: 400 },
+    );
+    expect(result1.dragmode).toBe("zoom");
+    expect(result1.title).toEqual({ text: "New" });
+    expect(result1.height).toBe(400);
+
+    // dragmode changed in figure -> use figure's dragmode
+    const result2 = computeLayoutUpdate(
+      { dragmode: "pan" },
+      { dragmode: "select" },
+      { dragmode: "zoom" },
+    );
+    expect(result2.dragmode).toBe("pan");
+  });
+});

package/src/plugins/impl/plotly/usePlotlyLayout.ts

@@ -0,0 +1,163 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { usePrevious } from "@uidotdev/usehooks";
+import { isEqual, pick } from "lodash-es";
+import { useEffect, useState } from "react";
+import type { Figure } from "react-plotly.js";
+import { Objects } from "@/utils/objects";
+
+/**
+ * Keys that are preserved across figure updates when set by user interaction.
+ * These include dragmode and axis settings that users may adjust.
+ */
+export const PERSISTED_LAYOUT_KEYS = ["dragmode", "xaxis", "yaxis"] as const;
+
+/**
+ * Keys that are omitted from layout updates unless they changed in the figure.
+ * This prevents overwriting user interactions like zoom/pan.
+ */
+export const LAYOUT_OMIT_KEYS: (keyof Plotly.Layout)[] = [
+  "autosize",
+  "dragmode",
+  "xaxis",
+  "yaxis",
+];
+
+/**
+ * Creates the initial layout for a Plotly figure with sensible defaults.
+ */
+export function createInitialLayout(figure: Figure): Partial<Plotly.Layout> {
+  // Enable autosize if width is not specified
+  const shouldAutoSize = figure.layout.width === undefined;
+  return {
+    autosize: shouldAutoSize,
+    dragmode: "select",
+    height: 540,
+    // Prioritize user's config
+    ...figure.layout,
+  };
+}
+
+/**
+ * Computes the updated layout when the figure changes.
+ * Preserves user-interaction values (dragmode, xaxis, yaxis) while
+ * taking everything else from the new figure's layout.
+ */
+export function computeLayoutOnFigureChange(
+  nextFigure: Figure,
+  prevLayout: Partial<Plotly.Layout>,
+): Partial<Plotly.Layout> {
+  return {
+    ...createInitialLayout(nextFigure),
+    ...pick(prevLayout, PERSISTED_LAYOUT_KEYS),
+  };
+}
+
+/**
+ * Computes which keys to omit from layout updates based on what changed.
+ * If a key changed in the figure, we should update it even if it's normally omitted.
+ */
+export function computeOmitKeys(
+  currentLayout: Partial<Plotly.Layout>,
+  previousLayout: Partial<Plotly.Layout>,
+): Set<keyof Plotly.Layout> {
+  const omitKeys = new Set<keyof Plotly.Layout>(LAYOUT_OMIT_KEYS);
+
+  // If the key was updated externally (e.g. can be specifically passed in the config)
+  // then we need to update the layout
+  for (const key of omitKeys) {
+    if (!isEqual(currentLayout[key], previousLayout[key])) {
+      omitKeys.delete(key);
+    }
+  }
+
+  return omitKeys;
+}
+
+/**
+ * Computes the layout update when figure.layout changes.
+ * Omits keys that shouldn't override user interactions unless they changed.
+ */
+export function computeLayoutUpdate(
+  figureLayout: Partial<Plotly.Layout>,
+  previousFigureLayout: Partial<Plotly.Layout>,
+  prevLayout: Partial<Plotly.Layout>,
+): Partial<Plotly.Layout> {
+  const omitKeys = computeOmitKeys(figureLayout, previousFigureLayout);
+  const layoutUpdate = Objects.omit(figureLayout, omitKeys);
+  return { ...prevLayout, ...layoutUpdate };
+}
+
+interface UsePlotlyLayoutOptions {
+  originalFigure: Figure;
+  initialValue?: Partial<Plotly.Layout>;
+  isScriptLoaded?: boolean;
+}
+
+interface UsePlotlyLayoutResult {
+  figure: Figure;
+  layout: Partial<Plotly.Layout>;
+  setLayout: React.Dispatch<React.SetStateAction<Partial<Plotly.Layout>>>;
+  handleReset: () => void;
+}
+
+/**
+ * Hook that manages the Plotly figure and layout state.
+ *
+ * This hook handles:
+ * - Cloning the figure to prevent Plotly mutations
+ * - Managing layout state with proper preservation of user interactions
+ * - Syncing layout when the figure changes
+ * - Providing a reset function to restore original state
+ */
+export function usePlotlyLayout({
+  originalFigure,
+  initialValue,
+  isScriptLoaded = true,
+}: UsePlotlyLayoutOptions): UsePlotlyLayoutResult {
+  const [figure, setFigure] = useState(() => {
+    // We clone the figure since Plotly mutates the figure in place
+    return structuredClone(originalFigure);
+  });
+
+  const [layout, setLayout] = useState<Partial<Plotly.Layout>>(() => {
+    return {
+      ...createInitialLayout(figure),
+      // Override with persisted values (dragmode, xaxis, yaxis)
+      ...initialValue,
+    };
+  });
+
+  // Update figure and layout when originalFigure changes
+  useEffect(() => {
+    const nextFigure = structuredClone(originalFigure);
+    setFigure(nextFigure);
+    // Start with the new figure's layout, then only preserve user-interaction
+    // values (dragmode, xaxis, yaxis) from the previous layout.
+    // We don't want to preserve other properties like `shapes` from the previous
+    // layout, as they should be fully controlled by the figure prop.
+    setLayout((prev) => computeLayoutOnFigureChange(nextFigure, prev));
+  }, [originalFigure, isScriptLoaded]);
+
+  const prevFigure = usePrevious(figure) ?? figure;
+
+  // Sync layout when figure.layout changes
+  useEffect(() => {
+    setLayout((prev) =>
+      computeLayoutUpdate(figure.layout, prevFigure.layout, prev),
+    );
+  }, [figure.layout, prevFigure.layout]);
+
+  const handleReset = () => {
+    const nextFigure = structuredClone(originalFigure);
+    setFigure(nextFigure);
+    setLayout(createInitialLayout(nextFigure));
+  };
+
+  return {
+    figure,
+    layout,
+    setLayout,
+    handleReset,
+  };
+}

package/src/utils/__tests__/download.test.tsx

@@ -158,7 +158,7 @@ describe("getImageDataUrlForCell", () => {
     expect(toPng).toHaveBeenCalledWith(mockElement);
   });
 
-  it("should add printing classes before capture", async () => {
+  it("should add printing classes before capture when enablePrintMode is true", async () => {
     vi.mocked(toPng).mockImplementation(async () => {
       // Check classes are applied during capture
       expect(mockElement.classList.contains("printing-output")).toBe(true);
@@ -167,18 +167,42 @@ describe("getImageDataUrlForCell", () => {
       return mockDataUrl;
     });
 
-    await getImageDataUrlForCell("cell-1" as CellId);
+    await getImageDataUrlForCell("cell-1" as CellId, true);
   });
 
-  it("should remove printing classes after capture", async () => {
+  it("should remove printing classes after capture when enablePrintMode is true", async () => {
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    await getImageDataUrlForCell("cell-1" as CellId);
+    await getImageDataUrlForCell("cell-1" as CellId, true);
 
     expect(mockElement.classList.contains("printing-output")).toBe(false);
     expect(document.body.classList.contains("printing")).toBe(false);
   });
 
+  it("should add printing-output but NOT body.printing when enablePrintMode is false", async () => {
+    vi.mocked(toPng).mockImplementation(async () => {
+      // printing-output should still be added to the element
+      expect(mockElement.classList.contains("printing-output")).toBe(true);
+      // but body.printing should NOT be added
+      expect(document.body.classList.contains("printing")).toBe(false);
+      expect(mockElement.style.overflow).toBe("auto");
+      return mockDataUrl;
+    });
+
+    await getImageDataUrlForCell("cell-1" as CellId, false);
+  });
+
+  it("should cleanup printing-output when enablePrintMode is false", async () => {
+    mockElement.style.overflow = "hidden";
+    vi.mocked(toPng).mockResolvedValue(mockDataUrl);
+
+    await getImageDataUrlForCell("cell-1" as CellId, false);
+
+    expect(mockElement.classList.contains("printing-output")).toBe(false);
+    expect(document.body.classList.contains("printing")).toBe(false);
+    expect(mockElement.style.overflow).toBe("hidden");
+  });
+
   it("should restore original overflow style after capture", async () => {
     mockElement.style.overflow = "hidden";
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
@@ -207,7 +231,7 @@ describe("getImageDataUrlForCell", () => {
     expect(mockElement.style.overflow).toBe("scroll");
   });
 
-  it("should maintain body.printing during concurrent captures", async () => {
+  it("should maintain body.printing during concurrent captures when enablePrintMode is true", async () => {
     // Create a second element
     const mockElement2 = document.createElement("div");
     mockElement2.id = CellOutputId.create("cell-2" as CellId);
@@ -241,9 +265,9 @@ describe("getImageDataUrlForCell", () => {
       return mockDataUrl;
     });
 
-    // Start both captures concurrently
-    const capture1 = getImageDataUrlForCell("cell-1" as CellId);
-    const capture2 = getImageDataUrlForCell("cell-2" as CellId);
+    // Start both captures concurrently with enablePrintMode = true
+    const capture1 = getImageDataUrlForCell("cell-1" as CellId, true);
+    const capture2 = getImageDataUrlForCell("cell-2" as CellId, true);
 
     // Let second capture complete first
     resolveSecond!();
@@ -264,6 +288,30 @@ describe("getImageDataUrlForCell", () => {
 
     mockElement2.remove();
   });
+
+  it("should not interfere with body.printing during concurrent captures when enablePrintMode is false", async () => {
+    // Create a second element
+    const mockElement2 = document.createElement("div");
+    mockElement2.id = CellOutputId.create("cell-2" as CellId);
+    document.body.append(mockElement2);
+
+    vi.mocked(toPng).mockImplementation(async () => {
+      // body.printing should never be added when enablePrintMode is false
+      expect(document.body.classList.contains("printing")).toBe(false);
+      return mockDataUrl;
+    });
+
+    // Start both captures concurrently with enablePrintMode = false
+    const capture1 = getImageDataUrlForCell("cell-1" as CellId, false);
+    const capture2 = getImageDataUrlForCell("cell-2" as CellId, false);
+
+    await Promise.all([capture1, capture2]);
+
+    // body.printing should still not be present
+    expect(document.body.classList.contains("printing")).toBe(false);
+
+    mockElement2.remove();
+  });
 });
 
 describe("downloadHTMLAsImage", () => {
@@ -342,7 +390,7 @@ describe("downloadHTMLAsImage", () => {
     expect(cleanup).toHaveBeenCalled();
   });
 
-  it("should not add body.printing when prepare is provided", async () => {
+  it("should delegate body.printing management to prepare function", async () => {
     let bodyPrintingDuringCapture = false;
     vi.mocked(toPng).mockImplementation(async () => {
       // Capture the state during toPng execution
@@ -350,7 +398,14 @@ describe("downloadHTMLAsImage", () => {
       return mockDataUrl;
     });
     const cleanup = vi.fn();
-    const prepare = vi.fn().mockReturnValue(cleanup);
+    // Mock prepare that adds body.printing
+    const prepare = vi.fn().mockImplementation(() => {
+      document.body.classList.add("printing");
+      return () => {
+        document.body.classList.remove("printing");
+        cleanup();
+      };
+    });
 
     await downloadHTMLAsImage({
       element: mockElement,
@@ -358,9 +413,8 @@ describe("downloadHTMLAsImage", () => {
       prepare,
     });
 
-    // body.printing should NOT be added by downloadHTMLAsImage when prepare is provided
-    // (the prepare function is responsible for managing its own classes)
-    expect(bodyPrintingDuringCapture).toBe(false);
+    // body.printing should be added by prepare function
+    expect(bodyPrintingDuringCapture).toBe(true);
     expect(document.body.classList.contains("printing")).toBe(false);
     expect(prepare).toHaveBeenCalledWith(mockElement);
     expect(cleanup).toHaveBeenCalled();