@marimo-team/islands 0.25.3-dev34 → 0.25.3-dev349

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

@@ -4,14 +4,17 @@ 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 type { IPluginProps, Setter } from "../../types";
+import type { GlideDataEditor } from "../data-editor/glide-data-editor";
+import type { ColumnType, EditorRow, Edits } from "../data-editor/types";
 import { DataEditorPlugin } from "../DataEditorPlugin";
 
 type PluginData = z.infer<typeof DataEditorPlugin.validator>;
 
 const mocks = vi.hoisted(() => ({
   loadData: vi.fn(),
+  renderEditor:
+    vi.fn<(props: React.ComponentProps<typeof GlideDataEditor>) => void>(),
 }));
 
 vi.mock("../vega/loader", () => ({
@@ -21,21 +24,36 @@ vi.mock("../vega/loader", () => ({
 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),
-      ),
+    default: (props: React.ComponentProps<typeof GlideDataEditor>) => {
+      mocks.renderEditor(props);
+      return React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+          "pre",
+          { "data-testid": "editor-data" },
+          JSON.stringify(props.data),
+        ),
+        React.createElement(
+          "pre",
+          { "data-testid": "editor-fields" },
+          JSON.stringify([...props.columnFields]),
+        ),
+      );
+    },
   };
 });
 
-function renderPlugin(data: PluginData, value: Edits) {
+function renderPlugin(
+  data: PluginData,
+  value: Edits,
+  setValue: Setter<Edits> = vi.fn(),
+) {
   const props: IPluginProps<Edits, PluginData> = {
     host: document.createElement("div"),
     data,
     value,
-    setValue: vi.fn(),
+    setValue,
     functions: {},
   };
   return React.createElement(
@@ -48,6 +66,7 @@ function renderPlugin(data: PluginData, value: Edits) {
 describe("DataEditorPlugin", () => {
   beforeEach(() => {
     mocks.loadData.mockReset();
+    mocks.renderEditor.mockClear();
   });
 
   it("normalizes an unrecognized field type", () => {
@@ -62,6 +81,19 @@ describe("DataEditorPlugin", () => {
     expect(result.fieldTypes).toEqual([["geom", ["unknown", "geometry"]]]);
   });
 
+  it("parses dropdown column types", () => {
+    const result = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: [],
+      fieldTypes: null,
+      editableColumns: "all",
+      columnTypes: { status: ["open", "closed"] },
+    });
+
+    expect(result.columnTypes).toEqual({ status: ["open", "closed"] });
+  });
+
   it("keeps the geometry field type", () => {
     const result = DataEditorPlugin.validator.parse({
       initialValue: { edits: [] },
@@ -107,6 +139,69 @@ describe("DataEditorPlugin", () => {
     });
   });
 
+  it("normalizes explicitly configured boolean columns", async () => {
+    const data = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: [{ active: "No" }, { active: "YES" }],
+      fieldTypes: null,
+      columnNames: ["active"],
+      columnTypes: { active: "boolean" },
+      editableColumns: "all",
+    });
+    render(renderPlugin(data, { edits: [] }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("editor-data")).toHaveTextContent(
+        JSON.stringify([{ active: false }, { active: true }]),
+      );
+    });
+  });
+
+  it("keeps numeric-looking dropdown values as option strings", async () => {
+    // Vega's CSV auto-parse turns "1" into 1 when no field types are sent.
+    mocks.loadData.mockResolvedValueOnce([{ level: 1 }, { level: 2 }]);
+    const data = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: "data.csv",
+      fieldTypes: null,
+      columnNames: ["level"],
+      columnTypes: { level: ["1", "2", "3"] },
+      editableColumns: "all",
+    });
+    render(renderPlugin(data, { edits: [] }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("editor-data")).toHaveTextContent(
+        JSON.stringify([{ level: "1" }, { level: "2" }]),
+      );
+    });
+  });
+
+  it("treats dropdown columns as strings over a numeric field type", async () => {
+    mocks.loadData.mockResolvedValueOnce([]);
+    const data = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: "data.csv",
+      fieldTypes: [["status", ["integer", "int64"]]],
+      columnNames: ["status"],
+      columnTypes: { status: ["open", "closed"] },
+      editableColumns: "all",
+    });
+    render(renderPlugin(data, { edits: [] }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("editor-fields").textContent).toContain(
+        '"string"',
+      );
+    });
+    expect(screen.getByTestId("editor-fields").textContent).not.toContain(
+      '"integer"',
+    );
+  });
+
   it("applies edit updates after data has loaded", async () => {
     const data = DataEditorPlugin.validator.parse({
       initialValue: { edits: [] },
@@ -123,6 +218,7 @@ describe("DataEditorPlugin", () => {
       );
     });
 
+    mocks.renderEditor.mockClear();
     result.rerender(
       renderPlugin(data, {
         edits: [{ rowIdx: 0, columnId: "name", value: "updated" }],
@@ -134,6 +230,90 @@ describe("DataEditorPlugin", () => {
         JSON.stringify([{ name: "updated" }]),
       );
     });
+    expect(mocks.renderEditor).toHaveBeenCalled();
+    for (const [props] of mocks.renderEditor.mock.calls) {
+      expect(props.data).toEqual([{ name: "updated" }]);
+    }
+  });
+
+  it("accumulates cell edits through the plugin value", async () => {
+    const data = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: [{ name: "original" }],
+      editableColumns: "all",
+    });
+    const Editor = () => {
+      const [value, setValue] = React.useState<Edits>({ edits: [] });
+      return renderPlugin(data, value, setValue);
+    };
+    render(React.createElement(Editor));
+    await screen.findByTestId("editor-data");
+
+    act(() => {
+      const onAddEdits = mocks.renderEditor.mock.lastCall?.[0].onAddEdits;
+      onAddEdits?.([{ rowIdx: 0, columnId: "name", value: "updated" }]);
+      onAddEdits?.([{ rowIdx: 1, columnId: "name", value: "appended" }]);
+    });
+
+    expect(screen.getByTestId("editor-data").textContent).toBe(
+      JSON.stringify([{ name: "updated" }, { name: "appended" }]),
+    );
+  });
+
+  it("removes the previous editor while loading a replacement schema", async () => {
+    const original = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: [{ name: "original", day: "2026-11-06" }],
+      editableColumns: "all",
+    });
+    const result = render(renderPlugin(original, { edits: [] }));
+    await screen.findByTestId("editor-data");
+    mocks.renderEditor.mockClear();
+
+    let resolveLoad: ((data: EditorRow[]) => void) | undefined;
+    mocks.loadData.mockImplementationOnce(
+      () =>
+        new Promise<EditorRow[]>((resolve) => {
+          resolveLoad = resolve;
+        }),
+    );
+    const replacement = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: "replacement.csv",
+      columnNames: ["task", "done", "priority"],
+      columnTypes: { done: "boolean", priority: ["01", "02", "10"] },
+      editableColumns: ["task"],
+    });
+    result.rerender(
+      renderPlugin(replacement, {
+        edits: [{ rowIdx: 0, columnId: "task", value: "latest" }],
+      }),
+    );
+
+    expect(screen.queryByTestId("editor-data")).toBeNull();
+    expect(mocks.renderEditor).not.toHaveBeenCalled();
+    await act(async () => {
+      resolveLoad?.([{ task: "Review", done: "yes", priority: "01" }]);
+    });
+    await screen.findByTestId("editor-data");
+    expect(mocks.renderEditor).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        data: [{ task: "latest", done: true, priority: "01" }],
+        columnFields: new Map([
+          ["task", "string"],
+          ["done", "boolean"],
+          ["priority", "string"],
+        ]),
+        columnTypes: new Map<string, ColumnType>([
+          ["done", "boolean"],
+          ["priority", ["01", "02", "10"]],
+        ]),
+        editableColumns: ["task"],
+      }),
+    );
   });
 
   it("ignores a superseded async data load", async () => {

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

@@ -10,13 +10,16 @@ import {
   render,
   screen,
   waitFor,
+  within,
 } from "@testing-library/react";
 import { Provider } from "jotai";
+import { useState } from "react";
 import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
 import type { DownloadAsFunction } from "@/components/data-table/schemas";
 import type { FieldTypesWithExternalType } from "@/components/data-table/types";
 import { store } from "@/core/state/jotai";
+import { Deferred } from "@/utils/Deferred";
 import {
   type GetDataUrl,
   type GetRowIds,
@@ -463,7 +466,7 @@ describe("LoadingDataTableComponent", () => {
   });
 });
 
-describe("static notebook control suppression", () => {
+describe("table pagination and static notebook control suppression", () => {
   const fieldTypes: FieldTypesWithExternalType = [
     ["id", ["integer", "integer"]],
     ["name", ["string", "string"]],
@@ -538,6 +541,389 @@ describe("static notebook control suppression", () => {
     mockIsStatic.mockReturnValue(false);
   });
 
+  it("preserves the preview banner for ordinary paginated tables with unknown totals", async () => {
+    const props = makeProps();
+    render(
+      <Wrapper>
+        <LoadingDataTableComponent {...props} totalRows="too_many" />
+      </Wrapper>,
+    );
+    expect(
+      await screen.findByText("Previewing the first 10 rows."),
+    ).toBeInTheDocument();
+  });
+
+  it("pages lazy results with unknown totals and resets search, sorting, and filters to page one", async () => {
+    const props = makeProps();
+    const search = vi
+      .fn()
+      .mockImplementation(
+        async (request: {
+          page_number: number;
+          query?: string;
+          sort?: { by: string; descending: boolean }[];
+        }) => ({
+          data: [
+            { id: request.page_number + 1, name: request.query || "item" },
+          ],
+          total_rows: "too_many",
+          has_next_page: request.page_number === 0,
+        }),
+      );
+    render(
+      <Wrapper>
+        <LoadingDataTableComponent
+          {...props}
+          lazy={true}
+          totalRows="too_many"
+          selection={null}
+          showColumnSummaries={false}
+          search={search}
+        />
+      </Wrapper>,
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    expect(screen.getByText("Unknown, 2 columns")).toBeInTheDocument();
+    expect(screen.queryByTestId("last-page-button")).not.toBeInTheDocument();
+    expect(screen.queryByText(/Previewing the first/)).not.toBeInTheDocument();
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1 }),
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeDisabled(),
+    );
+    fireEvent.click(screen.getByTestId("previous-page-button"));
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeDisabled(),
+    );
+    search.mockClear();
+    fireEvent.change(screen.getByPlaceholderText("Search..."), {
+      target: { value: "new" },
+    });
+    await waitFor(() =>
+      expect(search).toHaveBeenCalledWith(
+        expect.objectContaining({ query: "new", page_number: 0 }),
+      ),
+    );
+    expect(
+      search.mock.calls.every(([request]) => request.page_number === 0),
+    ).toBe(true);
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeDisabled(),
+    );
+    search.mockClear();
+    fireEvent.click(
+      within(screen.getByRole("columnheader", { name: /name/ })).getByRole(
+        "button",
+        { name: "Sort column ascending" },
+      ),
+    );
+    await waitFor(() =>
+      expect(search).toHaveBeenCalledWith(
+        expect.objectContaining({
+          page_number: 0,
+          sort: [{ by: "name", descending: false }],
+        }),
+      ),
+    );
+    expect(
+      search.mock.calls.every(([request]) => request.page_number === 0),
+    ).toBe(true);
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1 }),
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeDisabled(),
+    );
+    search.mockClear();
+    const columnMenu = within(
+      screen.getByRole("columnheader", { name: /name/ }),
+    ).getByRole("button", { name: "Column options" });
+    fireEvent.keyDown(columnMenu, { key: "Enter" });
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Filter" }));
+    fireEvent.change(screen.getByPlaceholderText("Text…"), {
+      target: { value: "item" },
+    });
+    fireEvent.click(screen.getByLabelText("Apply filter"));
+    await waitFor(() =>
+      expect(search).toHaveBeenCalledWith(
+        expect.objectContaining({
+          page_number: 0,
+          filters: expect.objectContaining({ children: expect.any(Array) }),
+        }),
+      ),
+    );
+    expect(
+      search.mock.calls.every(([request]) => request.page_number === 0),
+    ).toBe(true);
+  });
+
+  it.each(["success", "error"] as const)(
+    "ignores a stale lazy page %s after the query changes",
+    async (outcome) => {
+      const props = makeProps();
+      const initial = {
+        data: [{ id: 1, name: "initial-page" }],
+        total_rows: "too_many" as const,
+        has_next_page: true,
+      };
+      const oldPage = new Deferred<typeof initial>();
+      const newQuery = new Deferred<typeof initial>();
+      const search = vi
+        .fn()
+        .mockResolvedValueOnce(initial)
+        .mockReturnValueOnce(oldPage.promise)
+        .mockReturnValueOnce(newQuery.promise);
+      render(
+        <Wrapper>
+          <LoadingDataTableComponent
+            {...props}
+            lazy={true}
+            totalRows="too_many"
+            selection={null}
+            showColumnSummaries={false}
+            search={search}
+          />
+        </Wrapper>,
+      );
+      await screen.findByText("initial-page");
+      fireEvent.click(screen.getByTestId("next-page-button"));
+      await waitFor(() =>
+        expect(search).toHaveBeenLastCalledWith(
+          expect.objectContaining({ page_number: 1 }),
+        ),
+      );
+      expect(screen.getByTestId("next-page-button")).toBeDisabled();
+
+      fireEvent.change(screen.getByPlaceholderText("Search..."), {
+        target: { value: "current" },
+      });
+      await waitFor(() =>
+        expect(search).toHaveBeenLastCalledWith(
+          expect.objectContaining({ query: "current", page_number: 0 }),
+        ),
+      );
+      await act(async () => {
+        newQuery.resolve({
+          data: [{ id: 2, name: "latest-page" }],
+          total_rows: "too_many",
+          has_next_page: false,
+        });
+      });
+      await screen.findByText("latest-page");
+
+      await act(async () => {
+        if (outcome === "success") {
+          oldPage.resolve({
+            ...initial,
+            data: [{ id: 3, name: "stale-result" }],
+          });
+        } else {
+          oldPage.reject(new Error("stale-page-error"));
+        }
+      });
+      expect(screen.getByText("latest-page")).toBeInTheDocument();
+      expect(screen.queryByText("stale-result")).not.toBeInTheDocument();
+      expect(screen.queryByText("stale-page-error")).not.toBeInTheDocument();
+      expect(screen.getByTestId("previous-page-button")).toBeDisabled();
+      expect(screen.getByTestId("next-page-button")).toBeDisabled();
+    },
+  );
+
+  it("recovers from a failed lazy page by navigating back", async () => {
+    const props = makeProps();
+    const initial = {
+      data: [{ id: 1, name: "initial-page" }],
+      total_rows: "too_many" as const,
+      has_next_page: true,
+    };
+    const failedPage = new Deferred<typeof initial>();
+    const search = vi
+      .fn()
+      .mockResolvedValueOnce(initial)
+      .mockReturnValueOnce(failedPage.promise)
+      .mockResolvedValueOnce({
+        ...initial,
+        data: [{ id: 1, name: "recovered-page" }],
+      })
+      .mockResolvedValueOnce({
+        ...initial,
+        data: [{ id: 2, name: "last-page" }],
+        has_next_page: false,
+      });
+    render(
+      <Wrapper>
+        <LoadingDataTableComponent
+          {...props}
+          lazy={true}
+          totalRows="too_many"
+          selection={null}
+          showColumnSummaries={false}
+          search={search}
+        />
+      </Wrapper>,
+    );
+    await screen.findByText("initial-page");
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1 }),
+      ),
+    );
+    expect(screen.getByTestId("next-page-button")).toBeDisabled();
+    expect(screen.getByText("initial-page")).toBeInTheDocument();
+    await act(async () => {
+      failedPage.reject(new Error("page-fetch-failed"));
+    });
+    await screen.findByText("page-fetch-failed");
+    expect(screen.getByTestId("next-page-button")).toBeDisabled();
+    expect(screen.getByTestId("previous-page-button")).toBeEnabled();
+
+    fireEvent.click(screen.getByTestId("previous-page-button"));
+    await screen.findByText("recovered-page");
+    expect(search).toHaveBeenLastCalledWith(
+      expect.objectContaining({ page_number: 0 }),
+    );
+    expect(screen.queryByText("page-fetch-failed")).not.toBeInTheDocument();
+    expect(screen.getByTestId("next-page-button")).toBeEnabled();
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await screen.findByText("last-page");
+    expect(screen.getByTestId("next-page-button")).toBeDisabled();
+  });
+
+  it("requests only the first page with the new configured page size", async () => {
+    const props = makeProps();
+    const view = (pageSize: number) => (
+      <Wrapper>
+        <LoadingDataTableComponent {...props} pageSize={pageSize} />
+      </Wrapper>
+    );
+    const { rerender } = render(view(PAGE_SIZE));
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(props.search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1, page_size: PAGE_SIZE }),
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    props.search.mockClear();
+
+    rerender(view(5));
+    await waitFor(() => expect(props.search).toHaveBeenCalled());
+    expect(
+      props.search.mock.calls.every(
+        ([request]) => request.page_number === 0 && request.page_size === 5,
+      ),
+    ).toBe(true);
+  });
+
+  it("preserves a new page size when a pending response changes the row count in the same batch", async () => {
+    const props = makeProps();
+    const Harness = () => {
+      const [pageSize, setPageSize] = useState(PAGE_SIZE);
+      return (
+        <Wrapper>
+          <button type="button" onClick={() => setPageSize(5)}>
+            Change configured page size
+          </button>
+          <LoadingDataTableComponent {...props} pageSize={pageSize} />
+        </Wrapper>
+      );
+    };
+    render(<Harness />);
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    const response = {
+      data: firstPage,
+      total_rows: 25,
+      cell_styles: null,
+      cell_hover_texts: null,
+    };
+    const pendingPage = new Deferred<typeof response>();
+    props.search.mockReturnValueOnce(pendingPage.promise);
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(props.search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1, page_size: PAGE_SIZE }),
+      ),
+    );
+    props.search.mockClear();
+
+    await act(async () => {
+      pendingPage.resolve(response);
+      // Settle the table-loading promises without committing the queued render.
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      fireEvent.click(
+        screen.getByRole("button", { name: "Change configured page size" }),
+      );
+    });
+
+    await waitFor(() => expect(props.search).toHaveBeenCalled());
+    expect(props.search).toHaveBeenLastCalledWith(
+      expect.objectContaining({ page_number: 0, page_size: 5 }),
+    );
+  });
+
+  it("returns to the first page when a refreshed result changes the row count", async () => {
+    const props = makeProps();
+    const view = () => (
+      <Wrapper>
+        <LoadingDataTableComponent {...props} />
+      </Wrapper>
+    );
+    const { rerender } = render(view());
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(props.search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1 }),
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    props.search = vi.fn().mockResolvedValue({
+      data: firstPage,
+      total_rows: 25,
+      cell_styles: null,
+      cell_hover_texts: null,
+    });
+
+    rerender(view());
+    await waitFor(() =>
+      expect(props.search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 0, page_size: PAGE_SIZE }),
+      ),
+    );
+  });
+
   it("renders kernel-dependent controls in normal mode", async () => {
     const props = makeProps();
     render(