@marimo-team/islands 0.22.6-dev4 → 0.22.6-dev6

package/dist/main.js

@@ -57414,10 +57414,22 @@ ${c}
       ...e.layout
     };
   }
-  function computeLayoutOnFigureChange(e, r) {
-    return {
-      ...createInitialLayout(e),
-      ...Objects.pick(r, PERSISTED_LAYOUT_KEYS)
+  function hasCompatibleTraces(e, r) {
+    return e.data.length === r.data.length ? e.data.every((e2, c) => {
+      var _a3;
+      return (e2.type ?? "scatter") === (((_a3 = r.data[c]) == null ? void 0 : _a3.type) ?? "scatter");
+    }) : false;
+  }
+  function computeLayoutOnFigureChange(e, r, c) {
+    let d = createInitialLayout(e);
+    return hasCompatibleTraces(r, e) ? {
+      ...d,
+      ...Objects.pick(c, PERSISTED_LAYOUT_KEYS)
+    } : {
+      ...d,
+      ..."dragmode" in c ? {
+        dragmode: c.dragmode
+      } : {}
     };
   }
   function computeOmitKeys(e, r) {
@@ -57435,40 +57447,40 @@ ${c}
   function usePlotlyLayout(e) {
     let r = (0, import_compiler_runtime$32.c)(20), { originalFigure: c, initialValue: d, isScriptLoaded: f } = e, h = f === void 0 ? true : f, _;
     r[0] === c ? _ = r[1] : (_ = () => structuredClone(c), r[0] = c, r[1] = _);
-    let [v, y] = (0, import_react.useState)(_), S;
-    r[2] !== v || r[3] !== d ? (S = () => ({
+    let [v, y] = (0, import_react.useState)(_), S = (0, import_react.useRef)(v), w;
+    r[2] !== v || r[3] !== d ? (w = () => ({
       ...createInitialLayout(v),
       ...d
-    }), r[2] = v, r[3] = d, r[4] = S) : S = r[4];
-    let [w, E] = (0, import_react.useState)(S), O;
-    r[5] === c ? O = r[6] : (O = () => {
-      let e2 = structuredClone(c);
-      y(e2), E((r2) => computeLayoutOnFigureChange(e2, r2));
-    }, r[5] = c, r[6] = O);
-    let M;
-    r[7] !== h || r[8] !== c ? (M = [
+    }), r[2] = v, r[3] = d, r[4] = w) : w = r[4];
+    let [E, O] = (0, import_react.useState)(w), M;
+    r[5] === c ? M = r[6] : (M = () => {
+      let e2 = structuredClone(c), r2 = S.current;
+      S.current = e2, y(e2), O((c2) => computeLayoutOnFigureChange(e2, r2, c2));
+    }, r[5] = c, r[6] = M);
+    let I;
+    r[7] !== h || r[8] !== c ? (I = [
       c,
       h
-    ], r[7] = h, r[8] = c, r[9] = M) : M = r[9], (0, import_react.useEffect)(O, M);
-    let I = usePrevious(v) ?? v, z, G;
-    r[10] !== v.layout || r[11] !== I.layout ? (z = () => {
-      E((e2) => computeLayoutUpdate(v.layout, I.layout, e2));
-    }, G = [
+    ], r[7] = h, r[8] = c, r[9] = I) : I = r[9], (0, import_react.useEffect)(M, I);
+    let z = usePrevious(v) ?? v, G, q;
+    r[10] !== v.layout || r[11] !== z.layout ? (G = () => {
+      O((e2) => computeLayoutUpdate(v.layout, z.layout, e2));
+    }, q = [
       v.layout,
-      I.layout
-    ], r[10] = v.layout, r[11] = I.layout, r[12] = z, r[13] = G) : (z = r[12], G = r[13]), (0, import_react.useEffect)(z, G);
-    let q;
-    r[14] === c ? q = r[15] : (q = () => {
+      z.layout
+    ], r[10] = v.layout, r[11] = z.layout, r[12] = G, r[13] = q) : (G = r[12], q = r[13]), (0, import_react.useEffect)(G, q);
+    let Z7;
+    r[14] === c ? Z7 = r[15] : (Z7 = () => {
       let e2 = structuredClone(c);
-      y(e2), E(createInitialLayout(e2));
-    }, r[14] = c, r[15] = q);
-    let Z7 = q, Q7;
-    return r[16] !== v || r[17] !== Z7 || r[18] !== w ? (Q7 = {
+      y(e2), O(createInitialLayout(e2));
+    }, r[14] = c, r[15] = Z7);
+    let Q7 = Z7, $7;
+    return r[16] !== v || r[17] !== Q7 || r[18] !== E ? ($7 = {
       figure: v,
-      layout: w,
-      setLayout: E,
-      handleReset: Z7
-    }, r[16] = v, r[17] = Z7, r[18] = w, r[19] = Q7) : Q7 = r[19], Q7;
+      layout: E,
+      setLayout: O,
+      handleReset: Q7
+    }, r[16] = v, r[17] = Q7, r[18] = E, r[19] = $7) : $7 = r[19], $7;
   }
   var import_compiler_runtime$31 = require_compiler_runtime(), PlotlyPlugin = class {
     constructor() {
@@ -65633,7 +65645,7 @@ ${c}
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.22.6-dev4"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.22.6-dev6"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

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

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

@@ -8,11 +8,15 @@ import {
   computeLayoutUpdate,
   computeOmitKeys,
   createInitialLayout,
+  hasCompatibleTraces,
 } from "../usePlotlyLayout";
 
-function createFigure(layoutOverrides: Partial<Plotly.Layout> = {}): Figure {
+function createFigure(
+  layoutOverrides: Partial<Plotly.Layout> = {},
+  data: Plotly.Data[] = [],
+): Figure {
   return {
-    data: [],
+    data,
     layout: { ...layoutOverrides } as Plotly.Layout,
     frames: null,
   };
@@ -35,9 +39,46 @@ describe("createInitialLayout", () => {
   });
 });
 
+describe("hasCompatibleTraces", () => {
+  it("returns true for same trace types", () => {
+    const a = createFigure({}, [{ type: "scatter" } as Plotly.Data]);
+    const b = createFigure({}, [{ type: "scatter" } as Plotly.Data]);
+    expect(hasCompatibleTraces(a, b)).toBe(true);
+  });
+
+  it("returns true for default scatter types (undefined type)", () => {
+    const a = createFigure({}, [{} as Plotly.Data]);
+    const b = createFigure({}, [{ type: "scatter" } as Plotly.Data]);
+    expect(hasCompatibleTraces(a, b)).toBe(true);
+  });
+
+  it("returns false for different trace types", () => {
+    const a = createFigure({}, [{ type: "scatter" } as Plotly.Data]);
+    const b = createFigure({}, [{ type: "histogram" } as Plotly.Data]);
+    expect(hasCompatibleTraces(a, b)).toBe(false);
+  });
+
+  it("returns false for different number of traces", () => {
+    const a = createFigure({}, [{ type: "scatter" } as Plotly.Data]);
+    const b = createFigure({}, [
+      { type: "scatter" } as Plotly.Data,
+      { type: "scatter" } as Plotly.Data,
+    ]);
+    expect(hasCompatibleTraces(a, b)).toBe(false);
+  });
+
+  it("returns true for empty data arrays", () => {
+    const a = createFigure({}, []);
+    const b = createFigure({}, []);
+    expect(hasCompatibleTraces(a, b)).toBe(true);
+  });
+});
+
 describe("computeLayoutOnFigureChange", () => {
-  it("preserves only dragmode/xaxis/yaxis from previous layout (#7964)", () => {
-    const nextFigure = createFigure({ title: { text: "New" } });
+  it("preserves only dragmode/xaxis/yaxis from previous layout for compatible traces (#7964)", () => {
+    const scatterData = [{ type: "scatter" } as Plotly.Data];
+    const prevFigure = createFigure({}, scatterData);
+    const nextFigure = createFigure({ title: { text: "New" } }, scatterData);
     const prevLayout: Partial<Plotly.Layout> = {
       dragmode: "zoom",
       xaxis: { range: [0, 10] },
@@ -46,7 +87,11 @@ describe("computeLayoutOnFigureChange", () => {
       annotations: [{ text: "Old", x: 0, y: 0 }],
     };
 
-    const result = computeLayoutOnFigureChange(nextFigure, prevLayout);
+    const result = computeLayoutOnFigureChange(
+      nextFigure,
+      prevFigure,
+      prevLayout,
+    );
 
     // Preserved from prev
     expect(result.dragmode).toBe("zoom");
@@ -59,15 +104,68 @@ describe("computeLayoutOnFigureChange", () => {
     expect(result.annotations).toBeUndefined();
   });
 
+  it("resets axis settings when trace types change (#5898)", () => {
+    const prevFigure = createFigure({}, [{ type: "histogram" } as Plotly.Data]);
+    const nextFigure = createFigure({ title: { text: "Bar" } }, [
+      { type: "bar" } as Plotly.Data,
+    ]);
+    const prevLayout: Partial<Plotly.Layout> = {
+      dragmode: "zoom",
+      xaxis: { range: [-3, 3] },
+      yaxis: { range: [0, 200] },
+    };
+
+    const result = computeLayoutOnFigureChange(
+      nextFigure,
+      prevFigure,
+      prevLayout,
+    );
+
+    // Dragmode is still preserved
+    expect(result.dragmode).toBe("zoom");
+    // Axis settings are NOT preserved — they come from the new figure's layout
+    expect(result.xaxis).toBeUndefined();
+    expect(result.yaxis).toBeUndefined();
+    // New figure's layout is applied
+    expect(result.title).toEqual({ text: "Bar" });
+  });
+
+  it("preserves nextFigure dragmode when prevLayout has no dragmode", () => {
+    const prevFigure = createFigure({}, [{ type: "histogram" } as Plotly.Data]);
+    const nextFigure = createFigure({ dragmode: "lasso" }, [
+      { type: "bar" } as Plotly.Data,
+    ]);
+    const prevLayout: Partial<Plotly.Layout> = {
+      xaxis: { range: [0, 10] },
+    };
+
+    const result = computeLayoutOnFigureChange(
+      nextFigure,
+      prevFigure,
+      prevLayout,
+    );
+
+    // nextFigure.layout.dragmode should be preserved via base, not overwritten
+    expect(result.dragmode).toBe("lasso");
+    // Axis settings are NOT preserved for incompatible traces
+    expect(result.xaxis).toBeUndefined();
+    expect(result.yaxis).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 prevFigure = createFigure({});
     const prevLayout: Partial<Plotly.Layout> = {
       shapes: [{ type: "rect", x0: 0, x1: 1, y0: 0, y1: 1 }],
     };
 
-    const result = computeLayoutOnFigureChange(nextFigure, prevLayout);
+    const result = computeLayoutOnFigureChange(
+      nextFigure,
+      prevFigure,
+      prevLayout,
+    );
 
     expect(result.shapes).toHaveLength(1);
     expect(result.shapes?.[0].type).toBe("circle");

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

@@ -3,7 +3,7 @@
 import { usePrevious } from "@uidotdev/usehooks";
 import { dequal as isEqual } from "dequal";
 import type * as Plotly from "plotly.js";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Objects } from "@/utils/objects";
 import type { Figure } from "./Plot";
 
@@ -39,18 +39,46 @@ export function createInitialLayout(figure: Figure): Partial<Plotly.Layout> {
   };
 }
 
+/**
+ * Returns true if two figures have compatible trace types.
+ * When traces are incompatible (different types, count, or order), axis settings
+ * from the old figure should not be preserved as they would distort the
+ * new chart. See https://github.com/marimo-team/marimo/issues/5898
+ */
+export function hasCompatibleTraces(prev: Figure, next: Figure): boolean {
+  if (prev.data.length !== next.data.length) {
+    return false;
+  }
+  return prev.data.every(
+    (trace, i) =>
+      (trace.type ?? "scatter") === (next.data[i]?.type ?? "scatter"),
+  );
+}
+
 /**
  * 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.
+ *
+ * When trace types change, only dragmode is preserved — axis settings
+ * are reset to let Plotly auto-compute ranges for the new chart type.
  */
 export function computeLayoutOnFigureChange(
   nextFigure: Figure,
+  prevFigure: Figure,
   prevLayout: Partial<Plotly.Layout>,
 ): Partial<Plotly.Layout> {
+  const base = createInitialLayout(nextFigure);
+  if (hasCompatibleTraces(prevFigure, nextFigure)) {
+    return {
+      ...base,
+      ...Objects.pick(prevLayout, PERSISTED_LAYOUT_KEYS),
+    };
+  }
+  // Incompatible traces — only preserve dragmode, not axis settings
   return {
-    ...createInitialLayout(nextFigure),
-    ...Objects.pick(prevLayout, PERSISTED_LAYOUT_KEYS),
+    ...base,
+    ...("dragmode" in prevLayout ? { dragmode: prevLayout.dragmode } : {}),
   };
 }
 
@@ -121,6 +149,9 @@ export function usePlotlyLayout({
     return structuredClone(originalFigure);
   });
 
+  // Track the previous figure to detect trace type changes
+  const prevFigureRef = useRef(figure);
+
   const [layout, setLayout] = useState<Partial<Plotly.Layout>>(() => {
     return {
       ...createInitialLayout(figure),
@@ -132,12 +163,15 @@ export function usePlotlyLayout({
   // Update figure and layout when originalFigure changes
   useEffect(() => {
     const nextFigure = structuredClone(originalFigure);
+    const prevFig = prevFigureRef.current;
+    prevFigureRef.current = nextFigure;
     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));
+    // When trace types change, axis settings are reset to avoid distortion (#5898).
+    setLayout((prev) => computeLayoutOnFigureChange(nextFigure, prevFig, prev));
   }, [originalFigure, isScriptLoaded]);
 
   const prevFigure = usePrevious(figure) ?? figure;