@marimo-team/islands 0.24.1-dev3 → 0.24.1-dev31

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);

package/src/plugins/impl/vega/__tests__/vega.test.ts

@@ -7,6 +7,7 @@ import {
   vegaLoadData,
   vegaLoader,
 } from "../loader";
+import { getVegaFieldTypes } from "../utils";
 
 const { ZERO_WIDTH_SPACE, replacePeriodsInColumnNames, uniquifyColumnNames } =
   exportedForTesting;
@@ -102,15 +103,32 @@ yield_error,yield_center
     `);
   });
 
-  it.each(DATA_TYPES)("should handle %s data-type", async (type) => {
-    const csvData = "name,value_column\nAlice,1";
+  it.each(DATA_TYPES.filter((type) => type !== "geometry"))(
+    "should handle %s data-type",
+    async (type) => {
+      const csvData = "name,value_column\nAlice,1";
+      vi.spyOn(vegaLoader, "load").mockReturnValue(Promise.resolve(csvData));
+
+      const result = await vegaLoadData(csvData, {
+        type: "csv",
+        parse: { value_column: type },
+      });
+      expect(result.length).toEqual(1);
+    },
+  );
+
+  it("should parse geometry as a WKT string", async () => {
+    const csvData = "name,value_column\nAlice,POINT (0 0)";
     vi.spyOn(vegaLoader, "load").mockReturnValue(Promise.resolve(csvData));
 
+    const fieldTypes = getVegaFieldTypes({ value_column: "geometry" });
+    expect(fieldTypes).toEqual({ value_column: "string" });
+
     const result = await vegaLoadData(csvData, {
       type: "csv",
-      parse: { value_column: type },
+      parse: fieldTypes,
     });
-    expect(result.length).toEqual(1);
+    expect(result).toEqual([{ name: "Alice", value_column: "POINT (0 0)" }]);
   });
 
   it("should parse csv data with out of bound integers", async () => {

package/src/plugins/impl/vega/utils.ts

@@ -55,6 +55,9 @@ export function getVegaFieldTypes(
   // the correct formatting. For example, a date like '2024-01-01' will
   // be formatted to '2024-01-01T00:00:00.000Z'.
   return Objects.mapValues(types, (type): VegaDataType => {
+    if (type === "geometry") {
+      return "string";
+    }
     if (type === "date") {
       return "string";
     }

package/dist/arrays-C56grfjL.js

@@ -1,55 +0,0 @@
-import { t as invariant } from "./invariant-hOqqBz8A.js";
-function clamp(e, o, s) {
-  return Math.min(Math.max(e, o), s);
-}
-function arrayDelete(e, o) {
-  let s = [...e];
-  return s.splice(o, 1), s;
-}
-function arrayInsert(e, s, c) {
-  s = clamp(s, 0, e.length);
-  let l = [...e];
-  return l.splice(s, 0, c), l;
-}
-function arrayMove(e, o, s) {
-  let c = [...e], [l] = c.splice(o, 1);
-  return c.splice(s, 0, l), c;
-}
-function arrayInsertMany(e, s, c) {
-  if (e.length === 0) return c;
-  s = clamp(s, 0, e.length);
-  let l = [...e];
-  return l.splice(s, 0, ...c), l;
-}
-function arrayShallowEquals(e, o) {
-  if (e === o) return true;
-  if (e.length !== o.length) return false;
-  for (let s = 0, c = e.length; s < c; s++) if (e[s] !== o[s]) return false;
-  return true;
-}
-const Arrays = {
-  EMPTY: [],
-  zip: (o, s) => (invariant(o.length === s.length, "Arrays must be the same length"), o.map((e, o2) => [e, s[o2]]))
-};
-function uniq(e) {
-  return [...new Set(e)];
-}
-function uniqueBy(e, o) {
-  let s = [], c = /* @__PURE__ */ new Set();
-  for (let l of e) {
-    let e2 = o(l);
-    c.has(e2) || (c.add(e2), s.push(l));
-  }
-  return s;
-}
-export {
-  arrayMove as a,
-  uniqueBy as c,
-  arrayInsertMany as i,
-  clamp as l,
-  arrayDelete as n,
-  arrayShallowEquals as o,
-  arrayInsert as r,
-  uniq as s,
-  Arrays as t
-};

package/src/hooks/__tests__/useDataSourceDiscovery.test.ts

@@ -1,80 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { DiscoverDataSources } from "@/core/datasets/request-registry";
-import { loadDataSourceDiscovery } from "../useDataSourceDiscovery";
-
-describe("loadDataSourceDiscovery", () => {
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("returns the kernel's secret-free discovery model", async () => {
-    const sources = [
-      {
-        id: "pyiceberg-prod",
-        integration: "pyiceberg",
-        category: "catalog" as const,
-        displayName: "PyIceberg (prod)",
-        confidence: "high" as const,
-        origins: [
-          {
-            type: "configuration" as const,
-            label: "Resolved PyIceberg configuration",
-          },
-        ],
-        configuration: [
-          {
-            field: "Catalog",
-            value: {
-              kind: "safe-literal" as const,
-              value: "prod",
-            },
-          },
-        ],
-        code: 'catalog = load_catalog("prod")',
-      },
-    ];
-    const request = vi.spyOn(DiscoverDataSources, "request").mockResolvedValue({
-      request_id: "request-id",
-      sources,
-    });
-
-    const detected = await loadDataSourceDiscovery();
-
-    expect({ detected, requests: request.mock.calls }).toMatchInlineSnapshot(`
-      {
-        "detected": [
-          {
-            "category": "catalog",
-            "code": "catalog = load_catalog("prod")",
-            "confidence": "high",
-            "configuration": [
-              {
-                "field": "Catalog",
-                "value": {
-                  "kind": "safe-literal",
-                  "value": "prod",
-                },
-              },
-            ],
-            "displayName": "PyIceberg (prod)",
-            "id": "pyiceberg-prod",
-            "integration": "pyiceberg",
-            "origins": [
-              {
-                "label": "Resolved PyIceberg configuration",
-                "type": "configuration",
-              },
-            ],
-          },
-        ],
-        "requests": [
-          [
-            {},
-          ],
-        ],
-      }
-    `);
-  });
-});