@marimo-team/frontend 0.19.12-dev1 → 0.20.1

package/src/plugins/impl/__tests__/MatrixPlugin.test.tsx

@@ -0,0 +1,415 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { IPluginProps } from "../../types";
+import { MatrixPlugin } from "../MatrixPlugin";
+
+type PluginData = ReturnType<MatrixPlugin["validator"]["parse"]>;
+
+function makeProps(
+  overrides: Partial<IPluginProps<number[][], PluginData>> = {},
+): IPluginProps<number[][], PluginData> {
+  return {
+    host: document.createElement("div"),
+    value: [
+      [1, 2],
+      [3, 4],
+    ],
+    setValue: vi.fn(),
+    data: {
+      initialValue: [
+        [1, 2],
+        [3, 4],
+      ],
+      label: null,
+      minValue: null,
+      maxValue: null,
+      step: [
+        [1, 1],
+        [1, 1],
+      ],
+      precision: 1,
+      rowLabels: null,
+      columnLabels: null,
+      symmetric: false,
+      debounce: false,
+      scientific: false,
+      disabled: [
+        [false, false],
+        [false, false],
+      ],
+    },
+    functions: {},
+    ...overrides,
+  };
+}
+
+beforeEach(() => {
+  // jsdom doesn't implement pointer capture
+  Element.prototype.setPointerCapture = vi.fn();
+  Element.prototype.releasePointerCapture = vi.fn();
+
+  // jsdom's PointerEvent doesn't properly inherit MouseEvent properties
+  // like clientX. Polyfill it so fireEvent.pointerDown/Move/Up work.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (globalThis as any).PointerEvent = class PointerEvent extends MouseEvent {
+    readonly pointerId: number;
+    constructor(type: string, init: PointerEventInit = {}) {
+      super(type, init);
+      this.pointerId = init.pointerId ?? 0;
+    }
+  };
+});
+
+describe("MatrixPlugin", () => {
+  it("renders correct number of cells", () => {
+    const plugin = new MatrixPlugin();
+    const props = makeProps();
+    const { getAllByTestId } = render(plugin.render(props));
+
+    const cells = getAllByTestId(/^matrix-cell-/);
+    expect(cells).toHaveLength(4);
+  });
+
+  it("displays values with correct precision", () => {
+    const plugin = new MatrixPlugin();
+    const props = makeProps({
+      value: [
+        [1.5, 2.123],
+        [3, 4.9],
+      ],
+      data: {
+        ...makeProps().data,
+        precision: 2,
+      },
+    });
+    const { getByTestId } = render(plugin.render(props));
+
+    expect(getByTestId("matrix-cell-0-0").textContent).toBe("1.50");
+    expect(getByTestId("matrix-cell-0-1").textContent).toBe("2.12");
+    expect(getByTestId("matrix-cell-1-0").textContent).toBe("3.00");
+    expect(getByTestId("matrix-cell-1-1").textContent).toBe("4.90");
+  });
+
+  it("renders disabled cells with aria-disabled", () => {
+    const plugin = new MatrixPlugin();
+    const props = makeProps({
+      data: {
+        ...makeProps().data,
+        disabled: [
+          [true, false],
+          [false, true],
+        ],
+      },
+    });
+    const { getByTestId } = render(plugin.render(props));
+
+    expect(getByTestId("matrix-cell-0-0").getAttribute("aria-disabled")).toBe(
+      "true",
+    );
+    expect(getByTestId("matrix-cell-0-1").hasAttribute("aria-disabled")).toBe(
+      false,
+    );
+    expect(getByTestId("matrix-cell-1-0").hasAttribute("aria-disabled")).toBe(
+      false,
+    );
+    expect(getByTestId("matrix-cell-1-1").getAttribute("aria-disabled")).toBe(
+      "true",
+    );
+  });
+
+  it("renders row labels", () => {
+    const plugin = new MatrixPlugin();
+    const props = makeProps({
+      data: {
+        ...makeProps().data,
+        rowLabels: ["Row A", "Row B"],
+      },
+    });
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("Row A")).toBeDefined();
+    expect(getByText("Row B")).toBeDefined();
+  });
+
+  it("renders column labels", () => {
+    const plugin = new MatrixPlugin();
+    const props = makeProps({
+      data: {
+        ...makeProps().data,
+        columnLabels: ["Col X", "Col Y"],
+      },
+    });
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("Col X")).toBeDefined();
+    expect(getByText("Col Y")).toBeDefined();
+  });
+
+  it("renders a 3x3 matrix", () => {
+    const plugin = new MatrixPlugin();
+    const props = makeProps({
+      value: [
+        [1, 0, 0],
+        [0, 1, 0],
+        [0, 0, 1],
+      ],
+      data: {
+        ...makeProps().data,
+        step: [
+          [1, 1, 1],
+          [1, 1, 1],
+          [1, 1, 1],
+        ],
+        disabled: [
+          [false, false, false],
+          [false, false, false],
+          [false, false, false],
+        ],
+      },
+    });
+    const { getAllByTestId } = render(plugin.render(props));
+
+    const cells = getAllByTestId(/^matrix-cell-/);
+    expect(cells).toHaveLength(9);
+  });
+
+  it("validates with zod schema", () => {
+    const plugin = new MatrixPlugin();
+    const result = plugin.validator.safeParse({
+      initialValue: [
+        [1, 2],
+        [3, 4],
+      ],
+      label: "test",
+      minValue: null,
+      maxValue: null,
+      step: [
+        [1, 1],
+        [1, 1],
+      ],
+      precision: 1,
+      rowLabels: null,
+      columnLabels: null,
+      symmetric: false,
+      scientific: false,
+      disabled: [
+        [false, false],
+        [false, false],
+      ],
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("displays values in scientific notation", () => {
+    const plugin = new MatrixPlugin();
+    const props = makeProps({
+      value: [
+        [0.00153, 1234567],
+        [0, -0.042],
+      ],
+      data: {
+        ...makeProps().data,
+        scientific: true,
+        precision: 2,
+      },
+    });
+    const { getByTestId } = render(plugin.render(props));
+
+    expect(getByTestId("matrix-cell-0-0").textContent).toBe("1.53e-3");
+    expect(getByTestId("matrix-cell-0-1").textContent).toBe("1.23e+6");
+    expect(getByTestId("matrix-cell-1-0").textContent).toBe("0.00e+0");
+    expect(getByTestId("matrix-cell-1-1").textContent).toBe("-4.20e-2");
+  });
+
+  it("drag adjusts cell value", () => {
+    const plugin = new MatrixPlugin();
+    const setValueMock = vi.fn();
+    const props = makeProps({
+      value: [
+        [0, 0],
+        [0, 0],
+      ],
+      setValue: setValueMock,
+    });
+    const { getByTestId } = render(plugin.render(props));
+    const cell = getByTestId("matrix-cell-0-0");
+    const container = getByTestId("marimo-plugin-matrix");
+
+    // Pointer down on cell (0,0), then move 30px right = 3 steps
+    fireEvent.pointerDown(cell, { clientX: 100, pointerId: 1 });
+    fireEvent.pointerMove(container, { clientX: 130 });
+    fireEvent.pointerUp(container);
+
+    expect(setValueMock).toHaveBeenCalledWith([
+      [3, 0],
+      [0, 0],
+    ]);
+  });
+
+  it("symmetric mode mirrors value to transpose cell", () => {
+    const plugin = new MatrixPlugin();
+    const setValueMock = vi.fn();
+    const props = makeProps({
+      value: [
+        [0, 0],
+        [0, 0],
+      ],
+      setValue: setValueMock,
+      data: {
+        ...makeProps().data,
+        symmetric: true,
+      },
+    });
+    const { getByTestId } = render(plugin.render(props));
+    const cell = getByTestId("matrix-cell-0-1");
+    const container = getByTestId("marimo-plugin-matrix");
+
+    fireEvent.pointerDown(cell, { clientX: 100, pointerId: 1 });
+    fireEvent.pointerMove(container, { clientX: 120 }); // 2 steps
+    fireEvent.pointerUp(container);
+
+    // Cell (0,1) and (1,0) should both be 2
+    expect(setValueMock).toHaveBeenCalledWith([
+      [0, 2],
+      [2, 0],
+    ]);
+  });
+
+  it("ArrowUp increments cell value", () => {
+    const plugin = new MatrixPlugin();
+    const setValueMock = vi.fn();
+    const props = makeProps({
+      value: [
+        [5, 0],
+        [0, 0],
+      ],
+      setValue: setValueMock,
+    });
+    const { getByTestId } = render(plugin.render(props));
+
+    fireEvent.keyDown(getByTestId("matrix-cell-0-0"), { key: "ArrowUp" });
+
+    expect(setValueMock).toHaveBeenCalledWith([
+      [6, 0],
+      [0, 0],
+    ]);
+  });
+
+  it("ArrowDown decrements cell value", () => {
+    const plugin = new MatrixPlugin();
+    const setValueMock = vi.fn();
+    const props = makeProps({
+      value: [
+        [5, 0],
+        [0, 0],
+      ],
+      setValue: setValueMock,
+    });
+    const { getByTestId } = render(plugin.render(props));
+
+    fireEvent.keyDown(getByTestId("matrix-cell-0-0"), { key: "ArrowDown" });
+
+    expect(setValueMock).toHaveBeenCalledWith([
+      [4, 0],
+      [0, 0],
+    ]);
+  });
+
+  it("disabled cells ignore pointer and keyboard input", () => {
+    const plugin = new MatrixPlugin();
+    const setValueMock = vi.fn();
+    const props = makeProps({
+      value: [
+        [5, 0],
+        [0, 0],
+      ],
+      setValue: setValueMock,
+      data: {
+        ...makeProps().data,
+        disabled: [
+          [true, false],
+          [false, false],
+        ],
+      },
+    });
+    const { getByTestId } = render(plugin.render(props));
+    const cell = getByTestId("matrix-cell-0-0");
+    const container = getByTestId("marimo-plugin-matrix");
+
+    // Keyboard
+    fireEvent.keyDown(cell, { key: "ArrowUp" });
+    expect(setValueMock).not.toHaveBeenCalled();
+
+    // Drag
+    fireEvent.pointerDown(cell, { clientX: 100, pointerId: 1 });
+    fireEvent.pointerMove(container, { clientX: 130 });
+    fireEvent.pointerUp(container);
+    expect(setValueMock).not.toHaveBeenCalled();
+  });
+
+  it("clamps values to min/max bounds", () => {
+    const plugin = new MatrixPlugin();
+    const setValueMock = vi.fn();
+    const props = makeProps({
+      value: [
+        [5, 0],
+        [0, 0],
+      ],
+      setValue: setValueMock,
+      data: {
+        ...makeProps().data,
+        minValue: [
+          [0, 0],
+          [0, 0],
+        ],
+        maxValue: [
+          [6, 10],
+          [10, 10],
+        ],
+      },
+    });
+    const { getByTestId } = render(plugin.render(props));
+    const cell = getByTestId("matrix-cell-0-0");
+    const container = getByTestId("marimo-plugin-matrix");
+
+    // Try to drag far right (would be +10 without clamping)
+    fireEvent.pointerDown(cell, { clientX: 100, pointerId: 1 });
+    fireEvent.pointerMove(container, { clientX: 200 });
+    fireEvent.pointerUp(container);
+
+    // Should be clamped to max of 6
+    expect(setValueMock).toHaveBeenCalledWith([
+      [6, 0],
+      [0, 0],
+    ]);
+  });
+
+  it("sets aria attributes on cells", () => {
+    const plugin = new MatrixPlugin();
+    const props = makeProps({
+      data: {
+        ...makeProps().data,
+        rowLabels: ["x", "y"],
+        columnLabels: ["a", "b"],
+        minValue: [
+          [0, 0],
+          [0, 0],
+        ],
+        maxValue: [
+          [10, 10],
+          [10, 10],
+        ],
+      },
+    });
+    const { getByTestId } = render(plugin.render(props));
+    const cell = getByTestId("matrix-cell-0-1");
+
+    expect(cell.getAttribute("aria-label")).toBe("x, b");
+    expect(cell.getAttribute("aria-valuenow")).toBe("2");
+    expect(cell.getAttribute("aria-valuemin")).toBe("0");
+    expect(cell.getAttribute("aria-valuemax")).toBe("10");
+    expect(cell.getAttribute("tabindex")).toBe("0");
+  });
+});

package/src/plugins/impl/anywidget/model.ts

@@ -397,11 +397,10 @@ export async function handleWidgetMessage(
       return;
     }
 
-    case "close": {
+    case "close":
       BINDING_MANAGER.destroy(modelId);
       modelManager.delete(modelId); // aborts the model's signal, clearing listeners
       return;
-    }
 
     case "update": {
       const { state, buffer_paths = [] } = msg;

package/src/plugins/impl/matplotlib/MatplotlibPlugin.tsx

@@ -0,0 +1,70 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { type JSX, useEffect, useRef } from "react";
+import { z } from "zod";
+import type { IPlugin, IPluginProps } from "@/plugins/types";
+import {
+  type Data,
+  MatplotlibRenderer,
+  type MatplotlibState,
+  type SelectionValue as T,
+} from "./matplotlib-renderer";
+
+export class MatplotlibPlugin implements IPlugin<T, Data> {
+  tagName = "marimo-matplotlib";
+
+  validator = z.object({
+    chartBase64: z.string(),
+    xBounds: z.tuple([z.number(), z.number()]),
+    yBounds: z.tuple([z.number(), z.number()]),
+    axesPixelBounds: z.tuple([z.number(), z.number(), z.number(), z.number()]),
+    width: z.number(),
+    height: z.number(),
+    selectionColor: z.string().default("#3b82f6"),
+    selectionOpacity: z.number().default(0.15),
+    strokeWidth: z.number().default(2),
+    debounce: z.boolean(),
+    xScale: z.enum(["linear", "log"]).default("linear"),
+    yScale: z.enum(["linear", "log"]).default("linear"),
+  });
+
+  render(props: IPluginProps<T, Data>): JSX.Element {
+    return (
+      <MatplotlibComponent
+        {...props.data}
+        value={props.value}
+        setValue={props.setValue}
+      />
+    );
+  }
+}
+
+const MatplotlibComponent = (props: MatplotlibState) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<MatplotlibRenderer | null>(null);
+
+  useEffect(() => {
+    const container = ref.current;
+    if (!container) {
+      return;
+    }
+    const controller = new AbortController();
+    instance.current = new MatplotlibRenderer(container, {
+      state: props,
+      signal: controller.signal,
+    });
+    return () => {
+      controller.abort();
+      instance.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // No dependency array: intentionally syncs all props into the imperative
+  // renderer after every render. The renderer's update() method diffs internally.
+  useEffect(() => {
+    instance.current?.update(props);
+  });
+
+  return <div ref={ref} />;
+};

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

@@ -0,0 +1,152 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import type { Data } from "../matplotlib-renderer";
+import { visibleForTesting } from "../matplotlib-renderer";
+
+const { pixelToData, dataToPixel, pointInPolygon, clampToAxes, isPointInBox } =
+  visibleForTesting;
+
+// A simple axes geometry for testing:
+// axes occupy pixels [100, 50] to [500, 350] (400px wide, 300px tall)
+// data range x: [0, 10], y: [0, 100]
+const LINEAR_AXES: Pick<
+  Data,
+  "axesPixelBounds" | "xBounds" | "xScale" | "yBounds" | "yScale"
+> = {
+  axesPixelBounds: [100, 50, 500, 350],
+  xBounds: [0, 10],
+  yBounds: [0, 100],
+  xScale: "linear",
+  yScale: "linear",
+};
+
+const LOG_AXES: Pick<
+  Data,
+  "axesPixelBounds" | "xBounds" | "xScale" | "yBounds" | "yScale"
+> = {
+  axesPixelBounds: [100, 50, 500, 350],
+  xBounds: [1, 1000],
+  yBounds: [1, 1000],
+  xScale: "log",
+  yScale: "log",
+};
+
+describe("pixelToData", () => {
+  it("maps top-left of axes to (xMin, yMax)", () => {
+    const result = pixelToData({ x: 100, y: 50 }, LINEAR_AXES);
+    expect(result.x).toBeCloseTo(0);
+    expect(result.y).toBeCloseTo(100);
+  });
+
+  it("maps bottom-right of axes to (xMax, yMin)", () => {
+    const result = pixelToData({ x: 500, y: 350 }, LINEAR_AXES);
+    expect(result.x).toBeCloseTo(10);
+    expect(result.y).toBeCloseTo(0);
+  });
+
+  it("maps center of axes to midpoint of data range", () => {
+    const result = pixelToData({ x: 300, y: 200 }, LINEAR_AXES);
+    expect(result.x).toBeCloseTo(5);
+    expect(result.y).toBeCloseTo(50);
+  });
+});
+
+describe("dataToPixel", () => {
+  it("maps (xMin, yMax) to top-left of axes", () => {
+    const result = dataToPixel({ x: 0, y: 100 }, LINEAR_AXES);
+    expect(result.x).toBeCloseTo(100);
+    expect(result.y).toBeCloseTo(50);
+  });
+
+  it("maps (xMax, yMin) to bottom-right of axes", () => {
+    const result = dataToPixel({ x: 10, y: 0 }, LINEAR_AXES);
+    expect(result.x).toBeCloseTo(500);
+    expect(result.y).toBeCloseTo(350);
+  });
+});
+
+describe("pixelToData / dataToPixel roundtrip", () => {
+  it("roundtrips linear coordinates", () => {
+    const pixel = { x: 250, y: 175 };
+    const data = pixelToData(pixel, LINEAR_AXES);
+    const back = dataToPixel(data, LINEAR_AXES);
+    expect(back.x).toBeCloseTo(pixel.x);
+    expect(back.y).toBeCloseTo(pixel.y);
+  });
+
+  it("roundtrips log coordinates", () => {
+    const pixel = { x: 300, y: 200 };
+    const data = pixelToData(pixel, LOG_AXES);
+    const back = dataToPixel(data, LOG_AXES);
+    expect(back.x).toBeCloseTo(pixel.x);
+    expect(back.y).toBeCloseTo(pixel.y);
+  });
+});
+
+describe("pointInPolygon", () => {
+  // Triangle with vertices at (0,0), (10,0), (5,10)
+  const triangle = [
+    { x: 0, y: 0 },
+    { x: 10, y: 0 },
+    { x: 5, y: 10 },
+  ];
+
+  it("returns true for a point inside", () => {
+    expect(pointInPolygon({ x: 5, y: 3 }, triangle)).toBe(true);
+  });
+
+  it("returns false for a point outside", () => {
+    expect(pointInPolygon({ x: 20, y: 20 }, triangle)).toBe(false);
+  });
+
+  it("returns false for a point just outside a side", () => {
+    expect(pointInPolygon({ x: 0, y: 5 }, triangle)).toBe(false);
+  });
+});
+
+describe("clampToAxes", () => {
+  it("does not change a point inside the axes", () => {
+    const result = clampToAxes({ x: 300, y: 200 }, LINEAR_AXES);
+    expect(result).toEqual({ x: 300, y: 200 });
+  });
+
+  it("clamps a point left of axes to left edge", () => {
+    const result = clampToAxes({ x: 50, y: 200 }, LINEAR_AXES);
+    expect(result.x).toBe(100);
+    expect(result.y).toBe(200);
+  });
+
+  it("clamps a point above axes to top edge", () => {
+    const result = clampToAxes({ x: 300, y: 10 }, LINEAR_AXES);
+    expect(result.x).toBe(300);
+    expect(result.y).toBe(50);
+  });
+
+  it("clamps a point beyond bottom-right to corner", () => {
+    const result = clampToAxes({ x: 600, y: 400 }, LINEAR_AXES);
+    expect(result).toEqual({ x: 500, y: 350 });
+  });
+});
+
+describe("isPointInBox", () => {
+  const boxStart = { x: 10, y: 10 };
+  const boxEnd = { x: 50, y: 50 };
+
+  it("returns true for a point inside", () => {
+    expect(isPointInBox({ x: 30, y: 30 }, boxStart, boxEnd)).toBe(true);
+  });
+
+  it("returns true for a point on the edge", () => {
+    expect(isPointInBox({ x: 10, y: 30 }, boxStart, boxEnd)).toBe(true);
+  });
+
+  it("returns false for a point outside", () => {
+    expect(isPointInBox({ x: 5, y: 30 }, boxStart, boxEnd)).toBe(false);
+  });
+
+  it("works regardless of start/end order", () => {
+    // Swap start and end (end is top-left, start is bottom-right)
+    expect(isPointInBox({ x: 30, y: 30 }, boxEnd, boxStart)).toBe(true);
+    expect(isPointInBox({ x: 5, y: 30 }, boxEnd, boxStart)).toBe(false);
+  });
+});