@marimo-team/frontend 0.24.1-dev30 → 0.24.1-dev31

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-T5Rre8Dj.js"></script>
+    <script type="module" crossorigin src="./assets/index-DemYxG9z.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-BPPi7vOr.js">
     <link rel="modulepreload" crossorigin href="./assets/objects-CrbstYTV.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-C4rtOYze.js">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.24.1-dev30",
+  "version": "0.24.1-dev31",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/plugins/impl/matplotlib/__tests__/matplotlib-renderer.test.ts

@@ -190,6 +190,62 @@ describe("isInAxes", () => {
   });
 });
 
+// A 100x100 chart whose axes fill the whole figure.
+function createState(): MatplotlibState {
+  return {
+    ...LINEAR_AXES,
+    axesPixelBounds: [0, 0, 100, 100],
+    yBounds: [0, 10],
+    chartBase64: "first",
+    width: 100,
+    height: 100,
+    selectionColor: "blue",
+    selectionOpacity: 0.15,
+    strokeWidth: 2,
+    debounce: false,
+    value: { has_selection: false },
+    setValue: vi.fn(),
+  };
+}
+
+// jsdom has no matchMedia, no animation frames and no canvas context.
+function stubBrowser(ctx: Partial<CanvasRenderingContext2D> | null = null) {
+  vi.stubGlobal(
+    "matchMedia",
+    vi.fn(() => ({ addEventListener: vi.fn() })),
+  );
+  const requestAnimationFrame = vi.fn(() => 1);
+  vi.stubGlobal("requestAnimationFrame", requestAnimationFrame);
+  vi.stubGlobal("cancelAnimationFrame", vi.fn());
+  vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(
+    ctx as CanvasRenderingContext2D | null,
+  );
+  return { requestAnimationFrame };
+}
+
+// jsdom does not fetch images; resolve them synchronously instead.
+function stubSyncImage() {
+  vi.stubGlobal(
+    "Image",
+    class {
+      onload: (() => void) | null = null;
+      set src(_value: string) {
+        this.onload?.();
+      }
+    },
+  );
+}
+
+function createRecordingContext() {
+  return {
+    setTransform: vi.fn(),
+    clearRect: vi.fn(),
+    drawImage: vi.fn(),
+    save: vi.fn(),
+    restore: vi.fn(),
+  };
+}
+
 describe("MatplotlibRenderer", () => {
   afterEach(() => {
     vi.unstubAllGlobals();
@@ -197,36 +253,14 @@ describe("MatplotlibRenderer", () => {
   });
 
   it("restores a new selection when the chart changes", () => {
-    vi.stubGlobal(
-      "matchMedia",
-      vi.fn(() => ({ addEventListener: vi.fn() })),
-    );
-    vi.stubGlobal(
-      "requestAnimationFrame",
-      vi.fn(() => 1),
-    );
-    vi.stubGlobal("cancelAnimationFrame", vi.fn());
-    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
+    stubBrowser();
 
     const value = {
       type: "box",
       has_selection: true,
       data: { x_min: 2, x_max: 4, y_min: 2, y_max: 4 },
     } as const;
-    const state: MatplotlibState = {
-      ...LINEAR_AXES,
-      axesPixelBounds: [0, 0, 100, 100],
-      yBounds: [0, 10],
-      chartBase64: "first",
-      width: 100,
-      height: 100,
-      selectionColor: "blue",
-      selectionOpacity: 0.15,
-      strokeWidth: 2,
-      debounce: false,
-      value: { has_selection: false },
-      setValue: vi.fn(),
-    };
+    const state = createState();
     const container = document.createElement("div");
     const controller = new AbortController();
     const renderer = new MatplotlibRenderer(container, {
@@ -252,4 +286,130 @@ describe("MatplotlibRenderer", () => {
     expect(canvas.style.cursor).toBe("move");
     controller.abort();
   });
+
+  // Safari only fires resize on zoom, not the resolution query (#10625).
+  it("re-syncs the backing store on resize, without matchMedia firing", () => {
+    stubBrowser();
+    vi.stubGlobal("devicePixelRatio", 2);
+
+    const container = document.createElement("div");
+    const controller = new AbortController();
+    new MatplotlibRenderer(container, {
+      state: createState(),
+      signal: controller.signal,
+    });
+    const canvas = container.querySelector("canvas");
+    expect(canvas?.width).toBe(200);
+
+    vi.stubGlobal("devicePixelRatio", 1);
+    window.dispatchEvent(new Event("resize"));
+
+    expect(canvas?.width).toBe(100);
+    controller.abort();
+  });
+
+  // Re-sizing clears the buffer a frame before the repaint, so an over-eager
+  // guard flickers. 700 * 1.1 is the case a truncating comparison misses.
+  it("leaves the backing store alone when resize fires at an unchanged DPR", () => {
+    const { requestAnimationFrame } = stubBrowser();
+    vi.stubGlobal("devicePixelRatio", 1.1);
+
+    const container = document.createElement("div");
+    const controller = new AbortController();
+    new MatplotlibRenderer(container, {
+      state: { ...createState(), width: 700 },
+      signal: controller.signal,
+    });
+    const canvas = container.querySelector("canvas");
+    expect(canvas?.width).toBe(770);
+
+    requestAnimationFrame.mockClear();
+    window.dispatchEvent(new Event("resize"));
+
+    expect(canvas?.width).toBe(770);
+    expect(requestAnimationFrame).not.toHaveBeenCalled();
+    controller.abort();
+  });
+
+  it("draws with the backing-store scale, not the current devicePixelRatio", () => {
+    const ctx = createRecordingContext();
+    stubBrowser(ctx);
+    stubSyncImage();
+    vi.stubGlobal("devicePixelRatio", 2);
+
+    const state = createState();
+    const container = document.createElement("div");
+    const controller = new AbortController();
+    const renderer = new MatplotlibRenderer(container, {
+      state,
+      signal: controller.signal,
+    });
+    expect(container.querySelector("canvas")?.width).toBe(200);
+
+    // Zoom with nothing re-syncing the buffer: it still holds the old DPR, so
+    // the redraw must too, or the image lands scaled by dpr_new / dpr_old.
+    vi.stubGlobal("devicePixelRatio", 1);
+    ctx.setTransform.mockClear();
+    renderer.update({ ...state, strokeWidth: 4 });
+
+    expect(ctx.setTransform.mock.calls).toEqual([[2, 0, 0, 2, 0, 0]]);
+    expect(ctx.drawImage).toHaveBeenLastCalledWith(
+      expect.anything(),
+      0,
+      0,
+      100,
+      100,
+    );
+    controller.abort();
+  });
+
+  it("clears the whole backing store when a re-run swaps the chart", () => {
+    const ctx = createRecordingContext();
+    stubBrowser(ctx);
+    vi.stubGlobal("devicePixelRatio", 2);
+
+    const state = createState();
+    const container = document.createElement("div");
+    const controller = new AbortController();
+    const renderer = new MatplotlibRenderer(container, {
+      state,
+      signal: controller.signal,
+    });
+
+    vi.stubGlobal("devicePixelRatio", 1);
+    ctx.setTransform.mockClear();
+    ctx.clearRect.mockClear();
+    renderer.update({ ...state, chartBase64: "second" });
+
+    // A stale scale here would leave the outer 3/4 of the buffer unwiped.
+    expect(ctx.setTransform.mock.calls).toEqual([[2, 0, 0, 2, 0, 0]]);
+    expect(ctx.clearRect.mock.calls).toEqual([[0, 0, 100, 100]]);
+    controller.abort();
+  });
+
+  it("scales each axis by its own backing-store ratio", () => {
+    const ctx = createRecordingContext();
+    stubBrowser(ctx);
+    stubSyncImage();
+    // canvas.width/height are integers, so this truncates the two dimensions
+    // by different fractions: 150 * 1.25 -> 187 (0.5 lost), 500 * 1.25 -> 625
+    // (exact). One shared, width-derived scale would under-cover the buffer
+    // vertically and leave its bottom rows unwiped.
+    vi.stubGlobal("devicePixelRatio", 1.25);
+
+    const state = { ...createState(), width: 150, height: 500 };
+    const container = document.createElement("div");
+    const controller = new AbortController();
+    new MatplotlibRenderer(container, { state, signal: controller.signal });
+
+    const canvas = container.querySelector("canvas");
+    expect(canvas?.width).toBe(187);
+    expect(canvas?.height).toBe(625);
+    // The pre-load clear and the draw each set up their own transform.
+    const transform = [187 / 150, 0, 0, 625 / 500, 0, 0];
+    const rect = [0, 0, 150, 500];
+    expect(ctx.setTransform.mock.calls).toEqual([transform, transform]);
+    expect(ctx.clearRect.mock.calls).toEqual([rect, rect]);
+    controller.abort();
+  });
 });

package/src/plugins/impl/matplotlib/matplotlib-renderer.ts

@@ -281,6 +281,8 @@ export class MatplotlibRenderer {
   #image: HTMLImageElement | null = null;
   #imageGeneration = 0;
   #currentChartBase64 = "";
+  /** The devicePixelRatio the canvas buffer was last sized with. */
+  #backingDpr = 1;
 
   constructor(
     container: HTMLDivElement,
@@ -317,8 +319,12 @@ export class MatplotlibRenderer {
     });
 
     // Watch for devicePixelRatio changes (e.g. browser zoom, moving between
-    // displays). matchMedia fires exactly once per DPR transition.
+    // displays). matchMedia fires exactly once per DPR transition, but Safari
+    // doesn't re-evaluate the query on zoom — it only fires resize (#10625).
     this.#watchDevicePixelRatio(options.signal);
+    window.addEventListener("resize", this.#syncForDevicePixelRatio, {
+      signal: options.signal,
+    });
 
     // Clean up on abort
     options.signal.addEventListener("abort", () => {
@@ -334,6 +340,7 @@ export class MatplotlibRenderer {
   /** Set the canvas buffer + CSS size to match current logical size and DPR. */
   #syncCanvasSize(canvas: HTMLCanvasElement = this.#canvas): void {
     const dpr = globalThis.devicePixelRatio ?? 1;
+    this.#backingDpr = dpr;
     const { width, height } = this.#state;
     canvas.width = width * dpr;
     canvas.height = height * dpr;
@@ -343,6 +350,33 @@ export class MatplotlibRenderer {
     canvas.style.aspectRatio = `${width} / ${height}`;
   }
 
+  /**
+   * Scale to draw at, read back from the buffer rather than from
+   * `devicePixelRatio`, so sizing and drawing cannot disagree (#10625).
+   * Per-axis: `canvas.width`/`height` are integers, so a fractional DPR
+   * truncates each dimension by a different fraction of a device pixel.
+   */
+  get #backingScale(): { x: number; y: number } {
+    const { width, height } = this.#state;
+    const dpr = globalThis.devicePixelRatio ?? 1;
+    return {
+      x: width > 0 ? this.#canvas.width / width : dpr,
+      y: height > 0 ? this.#canvas.height / height : dpr,
+    };
+  }
+
+  /**
+   * Re-size the buffer when the DPR changed. resize fires far more often than
+   * the DPR moves, and `canvas.width` truncates, so compare ratios directly.
+   */
+  #syncForDevicePixelRatio = (): void => {
+    if ((globalThis.devicePixelRatio ?? 1) === this.#backingDpr) {
+      return;
+    }
+    this.#syncCanvasSize();
+    this.#scheduleRedraw();
+  };
+
   /**
    * Observe devicePixelRatio changes via matchMedia. Each listener fires once
    * per transition, so we re-register after every change.
@@ -355,8 +389,7 @@ export class MatplotlibRenderer {
       `(resolution: ${globalThis.devicePixelRatio ?? 1}dppx)`,
     );
     const onChange = () => {
-      this.#syncCanvasSize();
-      this.#drawCanvas();
+      this.#syncForDevicePixelRatio();
       // Re-register for the next DPR transition
       this.#watchDevicePixelRatio(signal);
     };
@@ -416,8 +449,8 @@ export class MatplotlibRenderer {
     this.#image = null;
     const ctx = this.#canvas.getContext("2d");
     if (ctx) {
-      const dpr = globalThis.devicePixelRatio ?? 1;
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      const scale = this.#backingScale;
+      ctx.setTransform(scale.x, 0, 0, scale.y, 0, 0);
       ctx.clearRect(0, 0, this.#state.width, this.#state.height);
     }
 
@@ -447,8 +480,8 @@ export class MatplotlibRenderer {
     const ix = this.#interaction;
 
     // Scale for HiDPI: all coordinates remain in logical pixels
-    const dpr = globalThis.devicePixelRatio ?? 1;
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    const scale = this.#backingScale;
+    ctx.setTransform(scale.x, 0, 0, scale.y, 0, 0);
 
     // Clear and draw the base image
     ctx.clearRect(0, 0, s.width, s.height);