@marimo-team/islands 0.19.7-dev6 → 0.19.7-dev8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.7-dev6",
+  "version": "0.19.7-dev8",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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,
+  };
+}