@marimo-team/frontend 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/assets/LazyAnyLanguageCodeMirror-DUvRReKp.js

@@ -1,2 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./any-language-editor-B92E_2Sy.js","./copy-icon-Cn8LzPNx.js","./button-W__YVea9.js","./useEventListener-DpNnLPuE.js","./objects-CrbstYTV.js","./compiler-runtime-DnimoHo0.js","./react-C60yClUi.js","./chunk-C4rtOYze.js","./jsx-runtime-3wZU7vFS.js","./cn-DCUzRj2J.js","./clsx-Dz_KRrWq.js","./tooltip-C9LWGQ7Y.js","./fullscreen-CrevbcR_.js","./react-dom-Ba2zmJWD.js","./dist-CFnrytEJ.js","./use-toast-DjpWVza6.js","./copy-HCSOwOwk.js","./check-CyyJPf_5.js","./createLucideIcon-B8oVfJNp.js","./copy-DlR5UiIE.js","./error-banner-d0-XOKtd.js","./alert-dialog-D_kB5FIu.js","./errors-D93OkQw8.js","./zod-BIDX-mZr.js","./dist-iZqQ8eEZ.js","./dist-CeF1Em5L.js","./dist-BVNaV53g.js","./dist-CqO2FBHV.js","./dist-Di6rD-vJ.js","./dist-5bwTcyKs.js","./dist-BrqkjqDe.js","./dist-5zzK1Bpl.js","./dist-SgSQKL07.js","./dist-BPoMypmC.js","./dist-DcguuZEe.js","./dist-Bm9PT5P9.js","./dist-Op2xySIC.js","./dist-ChJa98Av.js","./dist-VHnyClcl.js","./dist-C3YC038-.js","./esm-RBKN8Dn2.js","./extends-BiFDv3jB.js","./objectWithoutPropertiesLoose-DfWeGRFv.js","./dist-DanVWUek.js","./esm-CpCa6w8Q.js","./dist-BQMAD-re.js","./dist-CjgCY_Ws.js","./dist-CSEj3YUH.js","./dist-BbqPy6oS.js","./dist-BTX2QySO.js","./dist-AhQW5KN1.js","./apl-CPlG1HX3.js","./asciiarmor-DV_pcocJ.js","./asn1-DPxWcGvG.js","./brainfuck-CGDdBVNO.js","./clike-D91DrsBh.js","./clojure-B0eb_-2q.js","./cmake-COzUvjiS.js","./cobol-DW4FSnmb.js","./coffeescript-CommR2mv.js","./commonlisp-FR_N9RJL.js","./crystal-CAN7bz25.js","./css-DmLg8a0m.js","./cypher-BzSJn05x.js","./d-UpmnByGo.js","./diff-DRpitNo9.js","./dtd-CQV9N2ok.js","./dylan-Bp98yT5y.js","./ecl-BgtQ3zu5.js","./eiffel-Cu14O7Gi.js","./elm-Dp1dn40k.js","./erlang-DdogJjdp.js","./factor-D96xahcJ.js","./simple-mode-CfoR0Lvg.js","./forth-Dd0r86IP.js","./fortran-4qvtlW4z.js","./gas-DqwqZHXy.js","./gherkin-DMxJEDh5.js","./groovy-DA_MxBua.js","./haskell-B_hi8VEK.js","./haxe-D-I6YeRN.js","./idl-CteRrHSs.js","./javascript-Cq9DsvSW.js","./julia-bHGj6eLp.js","./livescript-C72YlTeO.js","./lua-DAtJrHXr.js","./mathematica-DGp7b8Lx.js","./mbox-C35KjfEV.js","./mirc-BRCHEPv1.js","./mllike-D7ajla-U.js","./modelica-0RGVL4ie.js","./mscgen-C7Ohs4Tl.js","./mumps-Cgag5Xef.js","./nsis-gzbsJ5t0.js","./ntriples-oQv5c69K.js","./octave-BMTXs4lo.js","./oz-CuHYwo8r.js","./pascal-eFKoVV2p.js","./perl-B1OqOW8w.js","./pig-gIrBDx27.js","./powershell-3fQF2XND.js","./properties-D4HHpZmU.js","./protobuf-DFSTKR0L.js","./pug-CfBtO6QD.js","./puppet-BAISgXk9.js","./python-mPctBCbA.js","./q-CYeV5Dbb.js","./r-Ds4UrjIV.js","./rpm-DV5-r6dM.js","./ruby-B9qrycrI.js","./sas-Cd7L1ZOe.js","./scheme-L6Kva-Kc.js","./shell-Ck42V1Kn.js","./sieve-DfSJcUfS.js","./smalltalk-CT418Iph.js","./sparql-BlJ_cLEt.js","./stex-BGrE-q7N.js","./stylus-92qIiGm1.js","./swift-gZzicbJu.js","./tcl-CtgoBYkk.js","./textile-Du3RzJ2D.js","./toml-HcF44TVB.js","./troff-xbwT4huN.js","./ttcn-cfg-jWDg1i50.js","./ttcn-phKysj_0.js","./turtle-CPC48wcy.js","./vb-BTubZ2rB.js","./vbscript-B52mDFWM.js","./velocity-BO3M1iFD.js","./verilog-CBz90JJu.js","./vhdl-CeQ1lGlV.js","./webidl-CRtF5pmu.js","./xquery-CFnbrHav.js","./yacas-KIC_JO6M.js","./z80-kGpw5_me.js"])))=>i.map(i=>d[i]);
-import{o as e}from"./chunk-C4rtOYze.js";import{t as o}from"./react-C60yClUi.js";import{t as i}from"./createLucideIcon-B8oVfJNp.js";import{t as m}from"./preload-helper-BPPi7vOr.js";let r,a,h=(async()=>{r=i("between-horizontal-start",[["rect",{width:"13",height:"7",x:"8",y:"3",rx:"1",key:"pkso9a"}],["path",{d:"m2 9 3 3-3 3",key:"1agib5"}],["rect",{width:"13",height:"7",x:"8",y:"14",rx:"1",key:"1q5fc1"}]]),a=(0,e(o(),1).lazy)(()=>m(()=>import("./any-language-editor-B92E_2Sy.js").then(async t=>(await t.__tla,t)),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134]),import.meta.url))})();export{h as __tla,r as n,a as t};