@marimo-team/frontend 0.20.0 → 0.20.2

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

@@ -3,8 +3,14 @@ import { describe, expect, it } from "vitest";
 import type { Data } from "../matplotlib-renderer";
 import { visibleForTesting } from "../matplotlib-renderer";
 
-const { pixelToData, dataToPixel, pointInPolygon, clampToAxes, isPointInBox } =
-  visibleForTesting;
+const {
+  pixelToData,
+  dataToPixel,
+  pointInPolygon,
+  clampToAxes,
+  isPointInBox,
+  isInAxes,
+} = visibleForTesting;
 
 // A simple axes geometry for testing:
 // axes occupy pixels [100, 50] to [500, 350] (400px wide, 300px tall)
@@ -150,3 +156,32 @@ describe("isPointInBox", () => {
     expect(isPointInBox({ x: 5, y: 30 }, boxEnd, boxStart)).toBe(false);
   });
 });
+
+describe("isInAxes", () => {
+  it("returns true for a point inside the axes", () => {
+    expect(isInAxes({ x: 300, y: 200 }, LINEAR_AXES)).toBe(true);
+  });
+
+  it("returns true for a point on the boundary", () => {
+    expect(isInAxes({ x: 100, y: 50 }, LINEAR_AXES)).toBe(true); // top-left
+    expect(isInAxes({ x: 500, y: 350 }, LINEAR_AXES)).toBe(true); // bottom-right
+    expect(isInAxes({ x: 100, y: 350 }, LINEAR_AXES)).toBe(true); // bottom-left
+    expect(isInAxes({ x: 500, y: 50 }, LINEAR_AXES)).toBe(true); // top-right
+  });
+
+  it("returns false for a point left of axes", () => {
+    expect(isInAxes({ x: 99, y: 200 }, LINEAR_AXES)).toBe(false);
+  });
+
+  it("returns false for a point right of axes", () => {
+    expect(isInAxes({ x: 501, y: 200 }, LINEAR_AXES)).toBe(false);
+  });
+
+  it("returns false for a point above axes", () => {
+    expect(isInAxes({ x: 300, y: 49 }, LINEAR_AXES)).toBe(false);
+  });
+
+  it("returns false for a point below axes", () => {
+    expect(isInAxes({ x: 300, y: 351 }, LINEAR_AXES)).toBe(false);
+  });
+});

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

@@ -257,6 +257,11 @@ function isPointInBox(
   return pt.x >= minX && pt.x <= maxX && pt.y >= minY && pt.y <= maxY;
 }
 
+function isInAxes(pt: PixelPoint, g: AxesGeometry): boolean {
+  const [axLeft, axTop, axRight, axBottom] = g.axesPixelBounds;
+  return pt.x >= axLeft && pt.x <= axRight && pt.y >= axTop && pt.y <= axBottom;
+}
+
 export const visibleForTesting = {
   createScale,
   pixelToData,
@@ -264,6 +269,7 @@ export const visibleForTesting = {
   pointInPolygon,
   clampToAxes,
   isPointInBox,
+  isInAxes,
 };
 
 export class MatplotlibRenderer {
@@ -330,10 +336,7 @@ export class MatplotlibRenderer {
     const prev = this.#state;
     this.#state = state;
 
-    if (state.chartBase64 !== this.#currentChartBase64) {
-      this.#loadImage(state.chartBase64);
-      return;
-    }
+    let needsRedraw = false;
 
     // Update canvas dimensions if changed
     if (state.width !== prev.width || state.height !== prev.height) {
@@ -342,15 +345,20 @@ export class MatplotlibRenderer {
       this.#canvas.height = state.height * dpr;
       this.#canvas.style.width = `${state.width}px`;
       this.#canvas.style.height = `${state.height}px`;
+      needsRedraw = true;
+    }
+
+    if (state.chartBase64 !== this.#currentChartBase64) {
+      this.#loadImage(state.chartBase64);
+      return;
     }
 
     // Redraw if style props changed or dimensions changed
     if (
+      needsRedraw ||
       state.selectionColor !== prev.selectionColor ||
       state.selectionOpacity !== prev.selectionOpacity ||
-      state.strokeWidth !== prev.strokeWidth ||
-      state.width !== prev.width ||
-      state.height !== prev.height
+      state.strokeWidth !== prev.strokeWidth
     ) {
       this.#drawCanvas();
     }
@@ -364,6 +372,15 @@ export class MatplotlibRenderer {
     // Clear selection on new chart
     this.#interaction = { type: "idle" };
 
+    // Clear stale image so old content doesn't linger while new image loads
+    this.#image = null;
+    const ctx = this.#canvas.getContext("2d");
+    if (ctx) {
+      const dpr = globalThis.devicePixelRatio ?? 1;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, this.#state.width, this.#state.height);
+    }
+
     const img = new Image();
     img.onload = () => {
       if (generation !== this.#imageGeneration) {
@@ -557,6 +574,9 @@ export class MatplotlibRenderer {
 
     // Shift+click -> start lasso
     if (e.shiftKey) {
+      if (!isInAxes(pt, this.#state)) {
+        return;
+      }
       this.#interaction = {
         type: "lasso",
         points: [clampToAxes(pt, this.#state)],
@@ -609,7 +629,10 @@ export class MatplotlibRenderer {
       this.#clearSelection();
     }
 
-    // Start new box selection
+    // Start new box selection (only inside axes)
+    if (!isInAxes(pt, this.#state)) {
+      return;
+    }
     const clamped = clampToAxes(pt, this.#state);
     this.#interaction = {
       type: "box",