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

package/src/plugins/impl/__tests__/DataEditorPlugin.test.ts

@@ -1,9 +1,55 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { describe, expect, it } from "vitest";
+import React, { Suspense } from "react";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { z } from "zod";
+import type { IPluginProps } from "../../types";
+import type { EditorRow, Edits } from "../data-editor/types";
 import { DataEditorPlugin } from "../DataEditorPlugin";
 
+type PluginData = z.infer<typeof DataEditorPlugin.validator>;
+
+const mocks = vi.hoisted(() => ({
+  loadData: vi.fn(),
+}));
+
+vi.mock("../vega/loader", () => ({
+  vegaLoadData: mocks.loadData,
+}));
+
+vi.mock("../data-editor/glide-data-editor", async () => {
+  const React = await import("react");
+  return {
+    default: (props: { data: EditorRow[] }) =>
+      React.createElement(
+        "pre",
+        { "data-testid": "editor-data" },
+        JSON.stringify(props.data),
+      ),
+  };
+});
+
+function renderPlugin(data: PluginData, value: Edits) {
+  const props: IPluginProps<Edits, PluginData> = {
+    host: document.createElement("div"),
+    data,
+    value,
+    setValue: vi.fn(),
+    functions: {},
+  };
+  return React.createElement(
+    Suspense,
+    { fallback: null },
+    DataEditorPlugin.render(props),
+  );
+}
+
 describe("DataEditorPlugin", () => {
+  beforeEach(() => {
+    mocks.loadData.mockReset();
+  });
+
   it("normalizes an unrecognized field type", () => {
     const result = DataEditorPlugin.validator.parse({
       initialValue: { edits: [] },
@@ -27,4 +73,109 @@ describe("DataEditorPlugin", () => {
 
     expect(result.fieldTypes).toEqual([["geom", ["geometry", "geometry"]]]);
   });
+
+  it("applies the latest edits when an async data load completes", async () => {
+    let resolveLoad: ((data: EditorRow[]) => void) | undefined;
+    mocks.loadData.mockImplementationOnce(
+      () =>
+        new Promise<EditorRow[]>((resolve) => {
+          resolveLoad = resolve;
+        }),
+    );
+
+    const data = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: "data.csv",
+      fieldTypes: null,
+      columnNames: ["name"],
+      editableColumns: "all",
+    });
+    const result = render(renderPlugin(data, { edits: [] }));
+    result.rerender(
+      renderPlugin(data, {
+        edits: [{ rowIdx: 0, columnId: "name", value: "latest" }],
+      }),
+    );
+    expect(resolveLoad).toBeDefined();
+    resolveLoad?.([{ name: "original" }]);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("editor-data")).toHaveTextContent(
+        JSON.stringify([{ name: "latest" }]),
+      );
+    });
+  });
+
+  it("applies edit updates after data has loaded", async () => {
+    const data = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: [{ name: "original" }],
+      fieldTypes: null,
+      columnNames: ["name"],
+      editableColumns: "all",
+    });
+    const result = render(renderPlugin(data, { edits: [] }));
+    await waitFor(() => {
+      expect(screen.getByTestId("editor-data")).toHaveTextContent(
+        JSON.stringify([{ name: "original" }]),
+      );
+    });
+
+    result.rerender(
+      renderPlugin(data, {
+        edits: [{ rowIdx: 0, columnId: "name", value: "updated" }],
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("editor-data")).toHaveTextContent(
+        JSON.stringify([{ name: "updated" }]),
+      );
+    });
+  });
+
+  it("ignores a superseded async data load", async () => {
+    let resolveFirst: ((data: EditorRow[]) => void) | undefined;
+    let resolveSecond: ((data: EditorRow[]) => void) | undefined;
+    mocks.loadData.mockImplementation((source: string) => {
+      return new Promise<EditorRow[]>((resolve) => {
+        if (source === "first.csv") {
+          resolveFirst = resolve;
+        } else {
+          resolveSecond = resolve;
+        }
+      });
+    });
+
+    const makeData = (source: string) =>
+      DataEditorPlugin.validator.parse({
+        initialValue: { edits: [] },
+        label: null,
+        data: source,
+        fieldTypes: null,
+        columnNames: ["source"],
+        editableColumns: "all",
+      });
+    const result = render(renderPlugin(makeData("first.csv"), { edits: [] }));
+    result.rerender(renderPlugin(makeData("second.csv"), { edits: [] }));
+
+    expect(resolveFirst).toBeDefined();
+    expect(resolveSecond).toBeDefined();
+    resolveSecond?.([{ source: "second" }]);
+    await waitFor(() => {
+      expect(screen.getByTestId("editor-data")).toHaveTextContent(
+        JSON.stringify([{ source: "second" }]),
+      );
+    });
+
+    await act(async () => {
+      resolveFirst?.([{ source: "first" }]);
+      await Promise.resolve();
+    });
+    expect(screen.getByTestId("editor-data")).toHaveTextContent(
+      JSON.stringify([{ source: "second" }]),
+    );
+  });
 });

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

@@ -6,6 +6,7 @@ import type { DataType } from "@/core/kernel/messages";
 import {
   insertColumn,
   modifyColumnFields,
+  orderColumnFields,
   removeColumn,
   renameColumn,
 } from "../data-utils";
@@ -15,16 +16,43 @@ import {
 const asFieldTypes = (obj: Record<string, DataType>): FieldTypes =>
   new Map(Object.entries(obj));
 
-describe("removeColumn", () => {
-  const testData = [
-    { int: 1, string: "a", bool: "True", datetime: "2025-07-12 00:07:13" },
-    { int: 2, string: "b", bool: "False", datetime: null },
-    { int: 3, string: "c", bool: null, datetime: "2025-07-12 00:07:13" },
-    { int: 0, string: "", bool: "", datetime: "" },
-  ];
+const testData = [
+  { int: 1, string: "a", bool: "True", datetime: "2025-07-12 00:07:13" },
+  { int: 2, string: "b", bool: "False", datetime: null },
+  { int: 3, string: "c", bool: null, datetime: "2025-07-12 00:07:13" },
+  { int: 0, string: "", bool: "", datetime: "" },
+];
+
+const mixedData = [{ a: 1, b: 2 }, { a: 3, b: 4, c: 5 }, { a: 6 }];
+
+const dataWithNulls = [
+  { a: 1, b: null, c: undefined },
+  { a: null, b: 2, c: 3 },
+];
+
+describe("orderColumnFields", () => {
+  it("uses explicit order for numeric-looking column names", () => {
+    const inferred = new Map([
+      ["2", "string"],
+      ["10", "string"],
+    ]) as FieldTypes;
+
+    expect([...orderColumnFields(inferred, ["10", "2"])]).toEqual([
+      ["10", "string"],
+      ["2", "string"],
+    ]);
+  });
 
-  it("should remove column at index 0", () => {
-    const result = removeColumn(testData, 0);
+  it("creates unknown fields for an empty table", () => {
+    expect([...orderColumnFields(new Map(), ["value"])]).toEqual([
+      ["value", "unknown"],
+    ]);
+  });
+});
+
+describe("removeColumn", () => {
+  it("should remove the first column", () => {
+    const result = removeColumn(testData, "int");
 
     expect(result).toEqual([
       { string: "a", bool: "True", datetime: "2025-07-12 00:07:13" },
@@ -34,8 +62,8 @@ describe("removeColumn", () => {
     ]);
   });
 
-  it("should remove column at index 1", () => {
-    const result = removeColumn(testData, 1);
+  it("should remove the second column", () => {
+    const result = removeColumn(testData, "string");
 
     expect(result).toEqual([
       { int: 1, bool: "True", datetime: "2025-07-12 00:07:13" },
@@ -45,8 +73,8 @@ describe("removeColumn", () => {
     ]);
   });
 
-  it("should remove column at index 2", () => {
-    const result = removeColumn(testData, 2);
+  it("should remove the third column", () => {
+    const result = removeColumn(testData, "bool");
 
     expect(result).toEqual([
       { int: 1, string: "a", datetime: "2025-07-12 00:07:13" },
@@ -56,8 +84,8 @@ describe("removeColumn", () => {
     ]);
   });
 
-  it("should remove column at index 3", () => {
-    const result = removeColumn(testData, 3);
+  it("should remove the last column", () => {
+    const result = removeColumn(testData, "datetime");
 
     expect(result).toEqual([
       { int: 1, string: "a", bool: "True" },
@@ -67,40 +95,26 @@ describe("removeColumn", () => {
     ]);
   });
 
-  it("should handle removing non-existent column index", () => {
-    const result = removeColumn(testData, 999);
-    // Should return the original data since the index doesn't exist
-    expect(result).toEqual(testData);
-  });
-
-  it("should handle negative index", () => {
-    const result = removeColumn(testData, -1);
-    // Should return the original data since negative index is invalid
+  it("should handle removing a non-existent column", () => {
+    const result = removeColumn(testData, "missing");
     expect(result).toEqual(testData);
   });
 
   it("should preserve original data structure", () => {
     const originalData = [...testData];
-    removeColumn(testData, 1);
+    removeColumn(testData, "string");
     // Original data should remain unchanged
     expect(testData).toEqual(originalData);
   });
 
   it("should handle objects with different property counts", () => {
-    const mixedData = [{ a: 1, b: 2 }, { a: 3, b: 4, c: 5 }, { a: 6 }];
-
-    const result = removeColumn(mixedData, 1);
+    const result = removeColumn(mixedData, "b");
 
     expect(result).toEqual([{ a: 1 }, { a: 3, c: 5 }, { a: 6 }]);
   });
 
   it("should handle null and undefined values in data", () => {
-    const dataWithNulls = [
-      { a: 1, b: null, c: undefined },
-      { a: null, b: 2, c: 3 },
-    ];
-
-    const result = removeColumn(dataWithNulls, 1);
+    const result = removeColumn(dataWithNulls, "b");
 
     expect(result).toEqual([
       { a: 1, c: undefined },
@@ -110,15 +124,8 @@ describe("removeColumn", () => {
 });
 
 describe("insertColumn", () => {
-  const testData = [
-    { int: 1, string: "a", bool: "True", datetime: "2025-07-12 00:07:13" },
-    { int: 2, string: "b", bool: "False", datetime: null },
-    { int: 3, string: "c", bool: null, datetime: "2025-07-12 00:07:13" },
-    { int: 0, string: "", bool: "", datetime: "" },
-  ];
-
   it("should insert column at index 0", () => {
-    const result = insertColumn(testData, "newColumn");
+    const result = insertColumn(testData, "newColumn", 0);
 
     const expected = [
       {
@@ -139,10 +146,17 @@ describe("insertColumn", () => {
       { newColumn: "", int: 0, string: "", bool: "", datetime: "" },
     ];
     expect(result).toEqual(expected);
+    expect(Object.keys(result[0])).toEqual([
+      "newColumn",
+      "int",
+      "string",
+      "bool",
+      "datetime",
+    ]);
   });
 
   it("should insert column at index 1", () => {
-    const result = insertColumn(testData, "newColumn");
+    const result = insertColumn(testData, "newColumn", 1);
 
     expect(result).toEqual([
       {
@@ -162,10 +176,17 @@ describe("insertColumn", () => {
       },
       { int: 0, newColumn: "", string: "", bool: "", datetime: "" },
     ]);
+    expect(Object.keys(result[0])).toEqual([
+      "int",
+      "newColumn",
+      "string",
+      "bool",
+      "datetime",
+    ]);
   });
 
   it("should insert column at index 2", () => {
-    const result = insertColumn(testData, "newColumn");
+    const result = insertColumn(testData, "newColumn", 2);
 
     expect(result).toEqual([
       {
@@ -188,7 +209,7 @@ describe("insertColumn", () => {
   });
 
   it("should insert column at index 3", () => {
-    const result = insertColumn(testData, "newColumn");
+    const result = insertColumn(testData, "newColumn", 3);
 
     expect(result).toEqual([
       {
@@ -211,7 +232,7 @@ describe("insertColumn", () => {
   });
 
   it("should insert column at the end when index equals length", () => {
-    const result = insertColumn(testData, "newColumn");
+    const result = insertColumn(testData, "newColumn", 4);
 
     expect(result).toEqual([
       {
@@ -234,7 +255,7 @@ describe("insertColumn", () => {
   });
 
   it("should handle inserting at index beyond array length", () => {
-    const result = insertColumn(testData, "newColumn");
+    const result = insertColumn(testData, "newColumn", 999);
     // Should add the column at the end
     expect(result).toEqual([
       {
@@ -270,14 +291,12 @@ describe("insertColumn", () => {
 
   it("should handle array with single object", () => {
     const singleRowData = [{ a: 1, b: 2, c: 3 }];
-    const result = insertColumn(singleRowData, "newColumn");
+    const result = insertColumn(singleRowData, "newColumn", 1);
     expect(result).toEqual([{ a: 1, newColumn: "", b: 2, c: 3 }]);
   });
 
   it("should handle objects with different property counts", () => {
-    const mixedData = [{ a: 1, b: 2 }, { a: 3, b: 4, c: 5 }, { a: 6 }];
-
-    const result = insertColumn(mixedData, "newColumn");
+    const result = insertColumn(mixedData, "newColumn", 1);
 
     expect(result).toEqual([
       { a: 1, newColumn: "", b: 2 },
@@ -287,12 +306,7 @@ describe("insertColumn", () => {
   });
 
   it("should handle null and undefined values in data", () => {
-    const dataWithNulls = [
-      { a: 1, b: null, c: undefined },
-      { a: null, b: 2, c: 3 },
-    ];
-
-    const result = insertColumn(dataWithNulls, "newColumn");
+    const result = insertColumn(dataWithNulls, "newColumn", 1);
 
     expect(result).toEqual([
       { a: 1, newColumn: "", b: null, c: undefined },
@@ -301,7 +315,7 @@ describe("insertColumn", () => {
   });
 
   it("should handle special characters in column name", () => {
-    const result = insertColumn(testData, "new-column_with_123");
+    const result = insertColumn(testData, "new-column_with_123", 1);
 
     expect(result).toEqual([
       {
@@ -331,13 +345,6 @@ describe("insertColumn", () => {
 });
 
 describe("renameColumn", () => {
-  const testData = [
-    { int: 1, string: "a", bool: "True", datetime: "2025-07-12 00:07:13" },
-    { int: 2, string: "b", bool: "False", datetime: null },
-    { int: 3, string: "c", bool: null, datetime: "2025-07-12 00:07:13" },
-    { int: 0, string: "", bool: "", datetime: "" },
-  ];
-
   it("should rename a column successfully", () => {
     const result = renameColumn(testData, "int", "number");
 
@@ -373,12 +380,7 @@ describe("renameColumn", () => {
   it("should handle renaming to an existing column name", () => {
     const result = renameColumn(testData, "int", "string");
 
-    expect(result).toEqual([
-      { string: 1, bool: "True", datetime: "2025-07-12 00:07:13" },
-      { string: 2, bool: "False", datetime: null },
-      { string: 3, bool: null, datetime: "2025-07-12 00:07:13" },
-      { string: 0, bool: "", datetime: "" },
-    ]);
+    expect(result).toEqual(testData);
   });
 
   it("should handle non-existent column name gracefully", () => {
@@ -421,8 +423,6 @@ describe("renameColumn", () => {
   });
 
   it("should handle objects with different property counts", () => {
-    const mixedData = [{ a: 1, b: 2 }, { a: 3, b: 4, c: 5 }, { a: 6 }];
-
     const result = renameColumn(mixedData, "a", "alpha");
 
     expect(result).toEqual([
@@ -433,11 +433,6 @@ describe("renameColumn", () => {
   });
 
   it("should handle null and undefined values in data", () => {
-    const dataWithNulls = [
-      { a: 1, b: null, c: undefined },
-      { a: null, b: 2, c: 3 },
-    ];
-
     const result = renameColumn(dataWithNulls, "b", "beta");
 
     expect(result).toEqual([

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

@@ -0,0 +1,113 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import type { FieldTypes } from "@/components/data-table/types";
+import { applyEditorEdits } from "../editor-state";
+
+describe("applyEditorEdits", () => {
+  it("replays edits against an empty table", () => {
+    const result = applyEditorEdits(
+      { data: [], columnFields: new Map([["value", "unknown"]]) },
+      [{ rowIdx: 0, columnId: "value", value: "first" }],
+    );
+
+    expect(result.data).toEqual([{ value: "first" }]);
+  });
+
+  it("replays an append after deleting every row", () => {
+    const result = applyEditorEdits(
+      {
+        data: [{ A: 1, B: "a" }],
+        columnFields: new Map([
+          ["A", "number"],
+          ["B", "string"],
+        ]) as FieldTypes,
+      },
+      [
+        { rowIdx: 0, type: "remove" },
+        { rowIdx: 0, columnId: "A", value: 2 },
+        { rowIdx: 0, columnId: "B", value: "b" },
+      ],
+    );
+
+    expect(result.data).toEqual([{ A: 2, B: "b" }]);
+  });
+
+  it("uses the evolving column order", () => {
+    const result = applyEditorEdits(
+      {
+        data: [{ A: "a", B: "b" }],
+        columnFields: new Map([
+          ["A", "string"],
+          ["B", "string"],
+        ]) as FieldTypes,
+      },
+      [
+        { columnIdx: 0, type: "remove" },
+        { columnIdx: 0, type: "rename", newName: "D" },
+      ],
+    );
+
+    expect(result.data).toEqual([{ D: "b" }]);
+    expect([...result.columnFields]).toEqual([["D", "string"]]);
+  });
+
+  it("preserves inserted column order through later edits", () => {
+    const result = applyEditorEdits(
+      {
+        data: [{ A: "a", C: "c" }],
+        columnFields: new Map([
+          ["A", "string"],
+          ["C", "string"],
+        ]) as FieldTypes,
+      },
+      [
+        {
+          columnIdx: 1,
+          type: "insert",
+          newName: "B",
+          dataType: "boolean",
+        },
+        { columnIdx: 1, type: "rename", newName: "D" },
+        { columnIdx: 2, type: "remove" },
+      ],
+    );
+
+    expect(result.data).toEqual([{ A: "a", D: "" }]);
+    expect(Object.keys(result.data[0])).toEqual(["A", "D"]);
+    expect([...result.columnFields]).toEqual([
+      ["A", "string"],
+      ["D", "boolean"],
+    ]);
+  });
+
+  it("does not mutate the previous state", () => {
+    const state = {
+      data: [{ A: "before" }],
+      columnFields: new Map([["A", "string"]]) as FieldTypes,
+    };
+
+    const result = applyEditorEdits(state, [
+      { rowIdx: 0, columnId: "A", value: "after" },
+      { columnIdx: 1, type: "insert", newName: "B" },
+    ]);
+
+    expect(state.data).toEqual([{ A: "before" }]);
+    expect([...state.columnFields]).toEqual([["A", "string"]]);
+    expect(result.data).toEqual([{ A: "after", B: "" }]);
+  });
+
+  it("ignores negative row indices", () => {
+    const state = {
+      data: [{ A: "unchanged" }],
+      columnFields: new Map([["A", "string"]]) as FieldTypes,
+    };
+
+    expect(
+      applyEditorEdits(state, [
+        { rowIdx: -1, columnId: "A", value: "invalid" },
+        { rowIdx: -1, type: "remove" },
+      ]).data,
+    ).toEqual(state.data);
+  });
+});

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

@@ -6,18 +6,31 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { GlideDataEditor } from "../glide-data-editor";
 
-const capturedPortalRef = vi.hoisted(() => ({
+const capturedDataEditor = vi.hoisted(() => ({
   ref: undefined as React.RefObject<HTMLElement> | undefined,
+  onCellEdited: undefined as
+    | ((cell: [number, number], value: { data: unknown }) => void)
+    | undefined,
+  onRowAppended: undefined as (() => void) | undefined,
 }));
 
 vi.mock("@glideapps/glide-data-grid", async () => {
   const React = await import("react");
   return {
     default: React.forwardRef(function MockDataEditor(
-      props: { portalElementRef?: React.RefObject<HTMLElement> },
+      props: {
+        portalElementRef?: React.RefObject<HTMLElement>;
+        onCellEdited?: (
+          cell: [number, number],
+          value: { data: unknown },
+        ) => void;
+        onRowAppended?: () => void;
+      },
       _ref: React.Ref<HTMLDivElement>,
     ) {
-      capturedPortalRef.ref = props.portalElementRef;
+      capturedDataEditor.ref = props.portalElementRef;
+      capturedDataEditor.onCellEdited = props.onCellEdited;
+      capturedDataEditor.onRowAppended = props.onRowAppended;
       return <div data-testid="mock-data-editor" />;
     }),
     CompactSelection: {
@@ -40,23 +53,16 @@ vi.mock("@/theme/useTheme", () => ({
 
 const editorProps = {
   data: [{ name: "alice" }],
-  setData: vi.fn(),
   columnFields: new Map([["name", "string"]]) as Map<string, "string">,
-  setColumnFields: vi.fn(),
   editableColumns: "all" as const,
-  edits: [],
   onAddEdits: vi.fn(),
-  onAddRows: vi.fn(),
-  onDeleteRows: vi.fn(),
-  onRenameColumn: vi.fn(),
-  onDeleteColumn: vi.fn(),
-  onAddColumn: vi.fn(),
 };
 
 describe("GlideDataEditor portal", () => {
   let fullscreenElement: Element | null;
 
   beforeEach(() => {
+    vi.clearAllMocks();
     fullscreenElement = null;
     Object.defineProperty(document, "fullscreenElement", {
       get: () => fullscreenElement,
@@ -79,12 +85,42 @@ describe("GlideDataEditor portal", () => {
     const portal = screen.getByTestId("glide-data-editor-portal");
     expect(portal.parentElement).toBe(document.body);
     expect(container.contains(portal)).toBe(false);
-    expect(capturedPortalRef.ref).toBeDefined();
+    expect(capturedDataEditor.ref).toBeDefined();
     await waitFor(() => {
-      expect(capturedPortalRef.ref?.current).toBe(portal);
+      expect(capturedDataEditor.ref?.current).toBe(portal);
     });
   });
 
+  it("emits cell edits", () => {
+    const onAddEdits = vi.fn();
+    render(
+      <TooltipProvider>
+        <GlideDataEditor {...editorProps} onAddEdits={onAddEdits} />
+      </TooltipProvider>,
+    );
+
+    act(() => capturedDataEditor.onCellEdited?.([0, 0], { data: "bob" }));
+
+    expect(onAddEdits).toHaveBeenCalledWith([
+      { rowIdx: 0, columnId: "name", value: "bob" },
+    ]);
+  });
+
+  it("emits one positional edit per cell when appending a row", () => {
+    const onAddEdits = vi.fn();
+    render(
+      <TooltipProvider>
+        <GlideDataEditor {...editorProps} onAddEdits={onAddEdits} />
+      </TooltipProvider>,
+    );
+
+    act(() => capturedDataEditor.onRowAppended?.());
+
+    expect(onAddEdits).toHaveBeenCalledWith([
+      { rowIdx: 1, columnId: "name", value: "" },
+    ]);
+  });
+
   it("mounts into the fullscreen element when fullscreen is already active", () => {
     const fullscreenContainer = document.createElement("div");
     document.body.appendChild(fullscreenContainer);