@marimo-team/frontend 0.23.1-dev7 → 0.23.1-dev9

package/src/core/cells/__tests__/cells.test.ts

@@ -22,7 +22,11 @@ import { foldAllBulk, unfoldAllBulk } from "@/core/codemirror/editing/commands";
 import { adaptiveLanguageConfiguration } from "@/core/codemirror/language/extension";
 import { OverridingHotkeyProvider } from "@/core/hotkeys/hotkeys";
 import type { OutputMessage } from "@/core/kernel/messages";
-import { type CollapsibleTree, MultiColumn } from "@/utils/id-tree";
+import {
+  type CollapsibleTree,
+  MultiColumn,
+  type CellColumnId,
+} from "@/utils/id-tree";
 import type { Seconds } from "@/utils/time";
 import {
   exportedForTesting,
@@ -495,6 +499,106 @@ describe("cell reducer", () => {
     `);
   });
 
+  it("can move a cell to an exact index within a column", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+    actions.createNewCell({
+      cellId: cellId("1"),
+      before: false,
+    });
+
+    const columnId = state.cellIds.atOrThrow(0).id;
+    actions.moveCellToIndex({
+      cellId: firstCellId,
+      columnId,
+      index: 3,
+    });
+
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      [1] ''
+
+      [2] ''
+
+      [0] ''
+      "
+    `);
+  });
+
+  it("can move a cell to an exact index across columns", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+    actions.createNewCell({
+      cellId: cellId("1"),
+      before: false,
+    });
+    actions.addColumnBreakpoint({ cellId: cellId("1") });
+
+    const secondColumnId = state.cellIds.atOrThrow(1).id;
+    actions.moveCellToIndex({
+      cellId: firstCellId,
+      columnId: secondColumnId,
+      index: 1,
+    });
+
+    expect(formatCells(state)).toMatchInlineSnapshot(`
+      "
+      > col 0
+
+
+      > col 1
+      [1] ''
+
+      [0] ''
+
+      [2] ''
+      "
+    `);
+  });
+
+  it("moveCellToIndex is a no-op when moving to the same position", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+    actions.createNewCell({
+      cellId: cellId("1"),
+      before: false,
+    });
+
+    const columnId = state.cellIds.atOrThrow(0).id;
+    const before = formatCells(state);
+
+    actions.moveCellToIndex({
+      cellId: firstCellId,
+      columnId,
+      index: 0,
+    });
+
+    expect(formatCells(state)).toBe(before);
+  });
+
+  it("moveCellToIndex is a no-op for an invalid columnId", () => {
+    actions.createNewCell({
+      cellId: firstCellId,
+      before: false,
+    });
+
+    const before = formatCells(state);
+
+    actions.moveCellToIndex({
+      cellId: firstCellId,
+      columnId: "nonexistent-column" as CellColumnId,
+      index: 0,
+    });
+
+    expect(formatCells(state)).toBe(before);
+  });
+
   it("can run cell and receive cell messages", () => {
     // HAPPY PATH
     /////////////////

package/src/core/cells/cells.ts

@@ -338,6 +338,49 @@ const {
           scrollKey: cellId,
         };
   },
+  moveCellToIndex: (
+    state,
+    action: {
+      cellId: CellId;
+      columnId: CellColumnId;
+      index: number;
+    },
+  ) => {
+    const { cellId, columnId, index } = action;
+    const fromColumn = state.cellIds.findWithId(cellId);
+    const fromIndex = fromColumn.indexOfOrThrow(cellId);
+
+    const destinationColumn = state.cellIds.get(columnId);
+    if (!destinationColumn) {
+      return state;
+    }
+
+    const clampedIndex = Math.max(0, Math.min(index, destinationColumn.length));
+    const adjustedIndex =
+      fromColumn.id === columnId && fromIndex < clampedIndex
+        ? clampedIndex - 1
+        : clampedIndex;
+
+    if (fromColumn.id === columnId && fromIndex === adjustedIndex) {
+      return state;
+    }
+
+    const withoutCell = state.cellIds.deleteById(cellId);
+    const updatedColumn = withoutCell.get(columnId);
+    if (!updatedColumn) {
+      return state;
+    }
+
+    return {
+      ...state,
+      cellIds: withoutCell.insertId(
+        cellId,
+        columnId,
+        Math.max(0, Math.min(adjustedIndex, updatedColumn.length)),
+      ),
+      scrollKey: null,
+    };
+  },
   dropCellOverCell: (state, action: { cellId: CellId; overCellId: CellId }) => {
     const { cellId, overCellId } = action;
 

package/src/core/cells/document-changes.ts

@@ -215,12 +215,13 @@ export function toDocumentChanges(
       ];
     }
 
-    // dropCellOverCell/dropCellOverColumn → set-config + reorder-cells
+    // dropCellOverCell/dropCellOverColumn/moveCellToIndex → set-config + reorder-cells
     // Drag-and-drop reorders can move cells within or across columns.
     // We emit config changes for cells whose column changed, then
     // the full ordering.
     case "dropCellOverCell":
     case "dropCellOverColumn":
+    case "moveCellToIndex":
       return columnChanges(prevState, newState);
 
     // updateCellCode → set-code

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

@@ -297,13 +297,7 @@ export class MatplotlibRenderer {
     // Create canvas
     const canvas = document.createElement("canvas");
     canvas.className = "block cursor-crosshair";
-    const dpr = globalThis.devicePixelRatio ?? 1;
-    canvas.width = this.#state.width * dpr;
-    canvas.height = this.#state.height * dpr;
-    canvas.style.width = `${this.#state.width}px`;
-    canvas.style.maxWidth = "100%";
-    canvas.style.height = "auto";
-    canvas.style.aspectRatio = `${this.#state.width} / ${this.#state.height}`;
+    this.#syncCanvasSize(canvas);
     canvas.style.touchAction = "none";
     container.append(canvas);
     this.#canvas = canvas;
@@ -322,6 +316,10 @@ export class MatplotlibRenderer {
       signal: options.signal,
     });
 
+    // Watch for devicePixelRatio changes (e.g. browser zoom, moving between
+    // displays). matchMedia fires exactly once per DPR transition.
+    this.#watchDevicePixelRatio(options.signal);
+
     // Clean up on abort
     options.signal.addEventListener("abort", () => {
       cancelAnimationFrame(this.#rafId);
@@ -333,6 +331,38 @@ export class MatplotlibRenderer {
     this.#restoreSelection(this.#state.value);
   }
 
+  /** Set the canvas buffer + CSS size to match current logical size and DPR. */
+  #syncCanvasSize(canvas: HTMLCanvasElement = this.#canvas): void {
+    const dpr = globalThis.devicePixelRatio ?? 1;
+    const { width, height } = this.#state;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    canvas.style.width = `${width}px`;
+    canvas.style.maxWidth = "100%";
+    canvas.style.height = "auto";
+    canvas.style.aspectRatio = `${width} / ${height}`;
+  }
+
+  /**
+   * Observe devicePixelRatio changes via matchMedia. Each listener fires once
+   * per transition, so we re-register after every change.
+   */
+  #watchDevicePixelRatio(signal: AbortSignal): void {
+    if (signal.aborted) {
+      return;
+    }
+    const mq = matchMedia(
+      `(resolution: ${globalThis.devicePixelRatio ?? 1}dppx)`,
+    );
+    const onChange = () => {
+      this.#syncCanvasSize();
+      this.#drawCanvas();
+      // Re-register for the next DPR transition
+      this.#watchDevicePixelRatio(signal);
+    };
+    mq.addEventListener("change", onChange, { once: true, signal });
+  }
+
   update(state: MatplotlibState): void {
     const prev = this.#state;
     this.#state = state;
@@ -341,13 +371,7 @@ export class MatplotlibRenderer {
 
     // Update canvas dimensions if changed
     if (state.width !== prev.width || state.height !== prev.height) {
-      const dpr = globalThis.devicePixelRatio ?? 1;
-      this.#canvas.width = state.width * dpr;
-      this.#canvas.height = state.height * dpr;
-      this.#canvas.style.width = `${state.width}px`;
-      this.#canvas.style.maxWidth = "100%";
-      this.#canvas.style.height = "auto";
-      this.#canvas.style.aspectRatio = `${state.width} / ${state.height}`;
+      this.#syncCanvasSize();
       needsRedraw = true;
     }