@marimo-team/frontend 0.24.1-dev79 → 0.24.1-dev80

package/src/plugins/impl/data-editor/__tests__/glide-utils.test.ts

@@ -3,7 +3,7 @@
 import type { GridSelection } from "@glideapps/glide-data-grid";
 import { CompactSelection, GridCellKind } from "@glideapps/glide-data-grid";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { pasteCells } from "../glide-utils";
+import { isValidCellValue, pasteCells } from "../glide-utils";
 import type { ModifiedGridColumn } from "../types";
 
 // Mock navigator.clipboard
@@ -16,6 +16,26 @@ Object.defineProperty(navigator, "clipboard", {
   writable: true,
 });
 
+describe("isValidCellValue", () => {
+  it("accepts only finite numbers", () => {
+    expect(isValidCellValue("number", 3.5)).toBe(true);
+    expect(isValidCellValue("number", Number.POSITIVE_INFINITY)).toBe(false);
+    expect(isValidCellValue("number", Number.NEGATIVE_INFINITY)).toBe(false);
+    expect(isValidCellValue("number", "Infinity")).toBe(false);
+    expect(isValidCellValue("number", Number.NaN)).toBe(false);
+  });
+
+  it("preserves integer precision", () => {
+    expect(isValidCellValue("integer", 3)).toBe(true);
+    expect(isValidCellValue("integer", 3.5)).toBe(false);
+    expect(isValidCellValue("integer", "9007199254740993")).toBe(true);
+    expect(isValidCellValue("integer", "9007199254740993.0")).toBe(true);
+    expect(isValidCellValue("integer", "9007199254740993.1")).toBe(false);
+    expect(isValidCellValue("integer", "1.0000000000000001")).toBe(false);
+    expect(isValidCellValue("integer", "1e-324")).toBe(false);
+  });
+});
+
 describe("pasteCells", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -76,13 +96,11 @@ describe("pasteCells", () => {
   it("should handle empty clipboard text", async () => {
     mockClipboard.readText.mockResolvedValue("");
 
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
 
     pasteCells({
       selection: createMockSelection(0, 0),
       data: createMockData(),
-      setData: mockSetLocalData,
       columns: createMockColumns(),
       editableColumns: "all",
       onAddEdits: mockOnAddEdits,
@@ -91,20 +109,17 @@ describe("pasteCells", () => {
     // Wait for the async operation
     await vi.waitFor(() => {
       expect(mockOnAddEdits).not.toHaveBeenCalled();
-      expect(mockSetLocalData).not.toHaveBeenCalled();
     });
   });
 
   it("should handle whitespace-only clipboard text", async () => {
     mockClipboard.readText.mockResolvedValue("   \n\t  ");
 
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
 
     pasteCells({
       selection: createMockSelection(0, 0),
       data: createMockData(),
-      setData: mockSetLocalData,
       columns: createMockColumns(),
       editableColumns: "all",
       onAddEdits: mockOnAddEdits,
@@ -112,20 +127,17 @@ describe("pasteCells", () => {
 
     await vi.waitFor(() => {
       expect(mockOnAddEdits).not.toHaveBeenCalled();
-      expect(mockSetLocalData).not.toHaveBeenCalled();
     });
   });
 
   it("should paste string data correctly", async () => {
     mockClipboard.readText.mockResolvedValue("David\t40\ttrue");
 
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
 
     pasteCells({
       selection: createMockSelection(0, 0),
       data: createMockData(),
-      setData: mockSetLocalData,
       columns: createMockColumns(),
       editableColumns: "all",
       onAddEdits: mockOnAddEdits,
@@ -140,16 +152,14 @@ describe("pasteCells", () => {
     });
   });
 
-  it("should convert number values correctly", async () => {
+  it("should skip fractional values for integer columns", async () => {
     mockClipboard.readText.mockResolvedValue("Eve\t25.5\tfalse");
 
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
 
     pasteCells({
       selection: createMockSelection(0, 0),
       data: createMockData(),
-      setData: mockSetLocalData,
       columns: createMockColumns(),
       editableColumns: "all",
       onAddEdits: mockOnAddEdits,
@@ -158,7 +168,6 @@ describe("pasteCells", () => {
     await vi.waitFor(() => {
       expect(mockOnAddEdits).toHaveBeenCalledWith([
         { rowIdx: 0, columnId: "name", value: "Eve" },
-        { rowIdx: 0, columnId: "age", value: 25.5 },
         { rowIdx: 0, columnId: "active", value: false },
       ]);
     });
@@ -167,13 +176,11 @@ describe("pasteCells", () => {
   it("should handle boolean conversion with different values", async () => {
     mockClipboard.readText.mockResolvedValue("Frank\t30\t1");
 
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
 
     pasteCells({
       selection: createMockSelection(0, 0),
       data: createMockData(),
-      setData: mockSetLocalData,
       columns: createMockColumns(),
       editableColumns: "all",
       onAddEdits: mockOnAddEdits,
@@ -191,13 +198,11 @@ describe("pasteCells", () => {
   it("should skip invalid number values", async () => {
     mockClipboard.readText.mockResolvedValue("Grace\tinvalid\tfalse");
 
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
 
     pasteCells({
       selection: createMockSelection(0, 0),
       data: createMockData(),
-      setData: mockSetLocalData,
       columns: createMockColumns(),
       editableColumns: "all",
       onAddEdits: mockOnAddEdits,
@@ -211,16 +216,36 @@ describe("pasteCells", () => {
     });
   });
 
+  it("should preserve unsafe integer precision", async () => {
+    mockClipboard.readText.mockResolvedValue("Grace\t9007199254740993\tfalse");
+
+    const mockOnAddEdits = vi.fn();
+
+    pasteCells({
+      selection: createMockSelection(0, 0),
+      data: createMockData(),
+      columns: createMockColumns(),
+      editableColumns: "all",
+      onAddEdits: mockOnAddEdits,
+    });
+
+    await vi.waitFor(() => {
+      expect(mockOnAddEdits).toHaveBeenCalledWith([
+        { rowIdx: 0, columnId: "name", value: "Grace" },
+        { rowIdx: 0, columnId: "age", value: "9007199254740993" },
+        { rowIdx: 0, columnId: "active", value: false },
+      ]);
+    });
+  });
+
   it("should handle multiple rows", async () => {
     mockClipboard.readText.mockResolvedValue("Hank\t40\ttrue\nIvy\t35\tfalse");
 
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
 
     pasteCells({
       selection: createMockSelection(0, 0),
       data: createMockData(),
-      setData: mockSetLocalData,
       columns: createMockColumns(),
       editableColumns: "all",
       onAddEdits: mockOnAddEdits,
@@ -243,13 +268,11 @@ describe("pasteCells", () => {
       "Jack\t45\ttrue\nKate\t50\tfalse\nLiam\t55\ttrue",
     );
 
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
 
     pasteCells({
       selection: createMockSelection(0, 0),
       data: createMockData(), // Only 3 rows
-      setData: mockSetLocalData,
       columns: createMockColumns(),
       editableColumns: "all",
       onAddEdits: mockOnAddEdits,
@@ -273,13 +296,11 @@ describe("pasteCells", () => {
   it("should respect column bounds - not exceed column count", async () => {
     mockClipboard.readText.mockResolvedValue("Mia\t30\ttrue\textra");
 
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
 
     pasteCells({
       selection: createMockSelection(0, 0),
       data: createMockData(),
-      setData: mockSetLocalData,
       columns: createMockColumns(), // Only 3 columns
       editableColumns: "all",
       onAddEdits: mockOnAddEdits,
@@ -297,13 +318,11 @@ describe("pasteCells", () => {
   it("should handle starting position offset", async () => {
     mockClipboard.readText.mockResolvedValue("Noah\t25\ttrue");
 
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
 
     pasteCells({
       selection: createMockSelection(1, 1), // Start at column 1, row 1
       data: createMockData(),
-      setData: mockSetLocalData,
       columns: createMockColumns(),
       editableColumns: "all",
       onAddEdits: mockOnAddEdits,
@@ -317,7 +336,6 @@ describe("pasteCells", () => {
   });
 
   it("should handle no selection", async () => {
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
 
     pasteCells({
@@ -327,7 +345,6 @@ describe("pasteCells", () => {
         columns: CompactSelection.empty(),
       },
       data: createMockData(),
-      setData: mockSetLocalData,
       columns: createMockColumns(),
       editableColumns: "all",
       onAddEdits: mockOnAddEdits,
@@ -335,7 +352,6 @@ describe("pasteCells", () => {
 
     await vi.waitFor(() => {
       expect(mockOnAddEdits).not.toHaveBeenCalled();
-      expect(mockSetLocalData).not.toHaveBeenCalled();
     });
   });
 
@@ -344,7 +360,6 @@ describe("pasteCells", () => {
       new Error("Clipboard access denied"),
     );
 
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
     const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {
       // Do nothing
@@ -353,7 +368,6 @@ describe("pasteCells", () => {
     pasteCells({
       selection: createMockSelection(0, 0),
       data: createMockData(),
-      setData: mockSetLocalData,
       columns: createMockColumns(),
       editableColumns: "all",
       onAddEdits: mockOnAddEdits,
@@ -361,53 +375,21 @@ describe("pasteCells", () => {
 
     await vi.waitFor(() => {
       expect(mockOnAddEdits).not.toHaveBeenCalled();
-      expect(mockSetLocalData).not.toHaveBeenCalled();
     });
 
     consoleSpy.mockRestore();
   });
 
-  it("should update local data when edits are applied", async () => {
-    mockClipboard.readText.mockResolvedValue("Olivia\t28\ttrue");
-
-    const mockSetLocalData = vi.fn();
-    const mockOnAddEdits = vi.fn();
-
-    pasteCells({
-      selection: createMockSelection(0, 0),
-      data: createMockData(),
-      setData: mockSetLocalData,
-      columns: createMockColumns(),
-      editableColumns: "all",
-      onAddEdits: mockOnAddEdits,
-    });
-
-    await vi.waitFor(() => {
-      expect(mockSetLocalData).toHaveBeenCalled();
-
-      // Verify the updater function is called
-      const updater = mockSetLocalData.mock.calls[0][0];
-      const originalData = createMockData();
-      const updatedData = updater(originalData);
-
-      expect(updatedData[0].name).toBe("Olivia");
-      expect(updatedData[0].age).toBe(28);
-      expect(updatedData[0].active).toBe(true);
-    });
-  });
-
   it("should handle empty rows in clipboard data", async () => {
     mockClipboard.readText.mockResolvedValue(
       "Paul\t30\ttrue\n\nRachel\t25\tfalse",
     );
 
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
 
     pasteCells({
       selection: createMockSelection(0, 0),
       data: createMockData(),
-      setData: mockSetLocalData,
       columns: createMockColumns(),
       editableColumns: "all",
       onAddEdits: mockOnAddEdits,
@@ -430,13 +412,11 @@ describe("pasteCells", () => {
       "Olivia\t28\ttrue\nWilliams\t35\tfalse",
     );
 
-    const mockSetLocalData = vi.fn();
     const mockOnAddEdits = vi.fn();
 
     pasteCells({
       selection: createMockSelection(0, 0),
       data: createMockData(),
-      setData: mockSetLocalData,
       columns: createMockColumns(),
       editableColumns: ["age"],
       onAddEdits: mockOnAddEdits,

package/src/plugins/impl/data-editor/data-utils.ts

@@ -2,79 +2,99 @@
 
 import type { FieldTypes } from "@/components/data-table/types";
 import type { DataType } from "@/core/kernel/messages";
+import { logNever } from "@/utils/assertNever";
 import { Logger } from "@/utils/Logger";
-
-/**
- * For modifying data, we do not worry about the order of the columns.
- * Because we define getCellContent based on columnTitle, the order does not matter.
- *
- * For column fields, we do care about the order
- */
-
-export function removeColumn<T>(data: T[], columnIdx: number): T[] {
-  return data.map((row) => {
-    const rowData = row as Record<string, unknown>;
-    const keys = Object.keys(rowData);
-
-    // If the column index is out of bounds, return the original row
-    if (columnIdx < 0 || columnIdx >= keys.length) {
-      return rowData as T;
+import { BulkEdit, type EditorRow } from "./types";
+
+export function orderColumnFields(
+  columnFields: FieldTypes,
+  columnNames: string[],
+): FieldTypes {
+  const ordered = new Map<string, DataType>();
+  for (const columnName of columnNames) {
+    ordered.set(columnName, columnFields.get(columnName) ?? "unknown");
+  }
+  for (const [columnName, dataType] of columnFields) {
+    if (!ordered.has(columnName)) {
+      ordered.set(columnName, dataType);
     }
+  }
+  return ordered;
+}
 
-    const keyToRemove = keys[columnIdx];
-
-    // Create new object without the specified key
-    const { [keyToRemove]: _, ...rest } = rowData;
-    return rest as T;
+export function removeColumn(
+  data: EditorRow[],
+  columnName: string,
+): EditorRow[] {
+  return data.map((row) => {
+    const { [columnName]: _, ...rest } = row;
+    return rest;
   });
 }
 
-/**
- * Insert a new column at the end of the data.
- * @param data - The data to insert the column into
- * @param newName - The name of the new column
- * @returns The data with the new column inserted at the end
- */
-export function insertColumn<T>(data: T[], newName?: string): T[] {
+export function insertColumn(
+  data: EditorRow[],
+  newName?: string,
+  columnIdx?: number,
+): EditorRow[] {
   if (!newName) {
     return data;
   }
 
-  return data.map((row) => ({
-    ...(row as Record<string, unknown>),
-    [newName]: "",
-  })) as T[];
+  return data.map((row) => {
+    const entries = Object.entries(row);
+    const insertAt = Math.max(
+      0,
+      Math.min(columnIdx ?? entries.length, entries.length),
+    );
+    entries.splice(insertAt, 0, [newName, ""]);
+    return Object.fromEntries(entries);
+  });
 }
 
-export function renameColumn<T>(
-  data: T[],
+export function renameColumn(
+  data: EditorRow[],
   oldName: string,
   newName: string,
-): T[] {
+): EditorRow[] {
   if (!oldName || !newName || oldName === newName) {
     return data;
   }
+  if (data.some((row) => Object.hasOwn(row, newName))) {
+    return data;
+  }
 
   return data.map((row) => {
-    const rowData = row as Record<string, unknown>;
-    const { [oldName]: _, ...rest } = rowData;
-    return { ...rest, [newName]: rowData[oldName] } as T;
+    return Object.fromEntries(
+      Object.entries(row).map(([columnName, value]) => [
+        columnName === oldName ? newName : columnName,
+        value,
+      ]),
+    );
   });
 }
 
-// Order of columns is important
-export function modifyColumnFields(opts: {
+type ModifyColumnFieldsOptions = {
   columnFields: FieldTypes;
   columnIdx: number;
-  type: "insert" | "remove" | "rename";
-  dataType?: DataType;
-  newColumnName?: string;
-}): FieldTypes {
-  const { columnFields, columnIdx, type, dataType, newColumnName } = opts;
+} & (
+  | { type: typeof BulkEdit.Remove }
+  | {
+      type: typeof BulkEdit.Insert | typeof BulkEdit.Rename;
+      newColumnName: string;
+      dataType?: DataType;
+    }
+);
 
-  switch (type) {
-    case "insert": {
-      if (!newColumnName) {
+// Order of columns is important
+export function modifyColumnFields(
+  opts: ModifyColumnFieldsOptions,
+): FieldTypes {
+  const { columnFields, columnIdx } = opts;
+
+  switch (opts.type) {
+    case BulkEdit.Insert: {
+      if (!opts.newColumnName) {
         Logger.error("newName is required for insert");
         return columnFields;
       }
@@ -82,12 +102,12 @@ export function modifyColumnFields(opts: {
       const entries = [...columnFields.entries()];
       const newEntries: Array<[string, DataType]> = [
         ...entries.slice(0, columnIdx),
-        [newColumnName, dataType || "string"],
+        [opts.newColumnName, opts.dataType ?? "string"],
         ...entries.slice(columnIdx),
       ];
       return new Map(newEntries);
     }
-    case "remove": {
+    case BulkEdit.Remove: {
       if (columnIdx < 0 || columnIdx >= columnFields.size) {
         return columnFields;
       }
@@ -101,8 +121,8 @@ export function modifyColumnFields(opts: {
       }
       return columnFields;
     }
-    case "rename": {
-      if (!newColumnName) {
+    case BulkEdit.Rename: {
+      if (!opts.newColumnName) {
         Logger.error("newName is required for rename");
         return columnFields;
       }
@@ -115,10 +135,13 @@ export function modifyColumnFields(opts: {
       const entries = [...columnFields.entries()];
       const newEntries: Array<[string, DataType]> = [
         ...entries.slice(0, columnIdx),
-        [newColumnName, dataType || "string"],
+        [opts.newColumnName, opts.dataType ?? "string"],
         ...entries.slice(columnIdx + 1),
       ];
       return new Map(newEntries);
     }
+    default:
+      logNever(opts);
+      return columnFields;
   }
 }

package/src/plugins/impl/data-editor/editor-state.ts

@@ -0,0 +1,108 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { FieldTypes } from "@/components/data-table/types";
+import { logNever } from "@/utils/assertNever";
+import {
+  insertColumn,
+  modifyColumnFields,
+  removeColumn,
+  renameColumn,
+} from "./data-utils";
+import { isColumnEdit, isPositionalEdit, isRowEdit } from "./glide-utils";
+import { BulkEdit, type EditorState, type Edits } from "./types";
+
+export function applyEditorEdits(
+  state: EditorState,
+  edits: Edits["edits"],
+): EditorState {
+  let nextData = [...state.data];
+  let nextColumnFields: FieldTypes = new Map(state.columnFields);
+
+  for (const edit of edits) {
+    if (isPositionalEdit(edit)) {
+      if (edit.rowIdx < 0) {
+        continue;
+      }
+      while (nextData.length <= edit.rowIdx) {
+        nextData.push({});
+      }
+      nextData[edit.rowIdx] = {
+        ...nextData[edit.rowIdx],
+        [edit.columnId]: edit.value,
+      };
+      if (!nextColumnFields.has(edit.columnId)) {
+        nextColumnFields.set(edit.columnId, "unknown");
+      }
+      continue;
+    }
+
+    if (isRowEdit(edit)) {
+      if (
+        edit.type === BulkEdit.Remove &&
+        edit.rowIdx >= 0 &&
+        edit.rowIdx < nextData.length
+      ) {
+        nextData.splice(edit.rowIdx, 1);
+      }
+      continue;
+    }
+
+    if (!isColumnEdit(edit)) {
+      continue;
+    }
+
+    const columnName = [...nextColumnFields.keys()][edit.columnIdx];
+    switch (edit.type) {
+      case BulkEdit.Remove:
+        if (columnName === undefined) {
+          break;
+        }
+        nextData = removeColumn(nextData, columnName);
+        nextColumnFields = modifyColumnFields({
+          columnFields: nextColumnFields,
+          columnIdx: edit.columnIdx,
+          type: "remove",
+        });
+        break;
+      case BulkEdit.Insert:
+        if (
+          !edit.newName ||
+          edit.columnIdx < 0 ||
+          edit.columnIdx > nextColumnFields.size ||
+          nextColumnFields.has(edit.newName)
+        ) {
+          break;
+        }
+        nextData = insertColumn(nextData, edit.newName, edit.columnIdx);
+        nextColumnFields = modifyColumnFields({
+          columnFields: nextColumnFields,
+          columnIdx: edit.columnIdx,
+          type: "insert",
+          dataType: edit.dataType,
+          newColumnName: edit.newName,
+        });
+        break;
+      case BulkEdit.Rename:
+        if (
+          columnName === undefined ||
+          !edit.newName ||
+          nextColumnFields.has(edit.newName)
+        ) {
+          break;
+        }
+        nextData = renameColumn(nextData, columnName, edit.newName);
+        nextColumnFields = modifyColumnFields({
+          columnFields: nextColumnFields,
+          columnIdx: edit.columnIdx,
+          type: "rename",
+          dataType: nextColumnFields.get(columnName),
+          newColumnName: edit.newName,
+        });
+        break;
+      default:
+        logNever(edit);
+    }
+  }
+
+  return { data: nextData, columnFields: nextColumnFields };
+}