@marimo-team/frontend 0.19.8-dev1 → 0.19.8-dev11

package/src/components/data-table/__tests__/data-table.test.tsx

@@ -1,6 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import type { ColumnDef, RowSelectionState } from "@tanstack/react-table";
-import { render, screen } from "@testing-library/react";
+import type {
+  ColumnDef,
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+} from "@tanstack/react-table";
+import { render, screen, within } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { DataTable } from "../data-table";
@@ -95,4 +100,91 @@ describe("DataTable", () => {
     expect(rows[1]).toHaveAttribute("title", "Michael Scott");
     expect(rows[2]).toHaveAttribute("title", "Jim Halpert");
   });
+
+  it("should display updated data after rerender with manual sorting and pagination", () => {
+    // Simulates the bug from issue #8023:
+    // When a user sorts a table, rows that moved from page 2 to page 1
+    // don't visually refresh after the underlying data is updated.
+
+    interface RowData {
+      id: number;
+      status: string;
+      value: number;
+    }
+
+    // Initial data: 4 rows, page_size=3
+    const initialData: RowData[] = [
+      { id: 4, status: "pending", value: 40 },
+      { id: 3, status: "pending", value: 30 },
+      { id: 2, status: "pending", value: 20 },
+    ];
+
+    const columns: ColumnDef<RowData>[] = [
+      { id: "id", accessorFn: (row) => row.id, header: "id" },
+      { id: "status", accessorFn: (row) => row.status, header: "status" },
+      { id: "value", accessorFn: (row) => row.value, header: "value" },
+    ];
+
+    // Simulate sorted state (value descending) - manual sorting means
+    // data comes pre-sorted from backend
+    const sorting: SortingState = [{ id: "value", desc: true }];
+    const setSorting = vi.fn();
+
+    const paginationState: PaginationState = { pageIndex: 0, pageSize: 3 };
+    const setPaginationState = vi.fn();
+
+    const commonProps = {
+      columns,
+      selection: null as "single" | "multi" | null,
+      totalRows: 4,
+      totalColumns: 3,
+      pagination: true,
+      manualPagination: true,
+      paginationState,
+      setPaginationState,
+      manualSorting: true,
+      sorting,
+      setSorting,
+    };
+
+    const { rerender } = render(
+      <TooltipProvider>
+        <DataTable {...commonProps} data={initialData} />
+      </TooltipProvider>,
+    );
+
+    // Verify initial data is displayed - look for "pending" in cells
+    const rows = screen.getAllByRole("row");
+    // Row 0 is header, rows 1-3 are data rows
+    expect(rows).toHaveLength(4); // 1 header + 3 data rows
+    // All rows should show "pending"
+    expect(within(rows[1]).getByText("pending")).toBeTruthy();
+    expect(within(rows[2]).getByText("pending")).toBeTruthy();
+    expect(within(rows[3]).getByText("pending")).toBeTruthy();
+
+    // Now simulate data update: row with id=4 is now "approved"
+    // Backend returns sorted data with the update applied
+    const updatedData: RowData[] = [
+      { id: 4, status: "approved", value: 40 },
+      { id: 3, status: "pending", value: 30 },
+      { id: 2, status: "pending", value: 20 },
+    ];
+
+    // Rerender with updated data (same sorting, same pagination)
+    rerender(
+      <TooltipProvider>
+        <DataTable {...commonProps} data={updatedData} />
+      </TooltipProvider>,
+    );
+
+    // BUG: The row should show "approved" but might show stale "pending"
+    const updatedRows = screen.getAllByRole("row");
+    expect(updatedRows).toHaveLength(4);
+
+    // The first data row (id=4) should now show "approved"
+    expect(within(updatedRows[1]).getByText("approved")).toBeTruthy();
+    // Other rows should still show "pending"
+    expect(within(updatedRows[2]).getByText("pending")).toBeTruthy();
+    expect(within(updatedRows[3]).getByText("pending")).toBeTruthy();
+  });
 });

package/src/core/MarimoApp.tsx

@@ -39,14 +39,18 @@ const LazyGalleryPage = reactLazyWithPreload(
 );
 
 export function preloadPage(mode: string) {
-  if (mode === "home") {
-    LazyHomePage.preload();
-  } else if (mode === "gallery") {
-    LazyGalleryPage.preload();
-  } else if (mode === "read") {
-    LazyRunPage.preload();
-  } else {
-    LazyEditPage.preload();
+  switch (mode) {
+    case "home":
+      LazyHomePage.preload();
+      break;
+    case "gallery":
+      LazyGalleryPage.preload();
+      break;
+    case "read":
+      LazyRunPage.preload();
+      break;
+    default:
+      LazyEditPage.preload();
   }
 }
 

package/src/core/islands/__tests__/bridge.test.ts

@@ -0,0 +1,241 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock browser APIs before any imports
+vi.stubGlobal(
+  "Worker",
+  vi.fn(() => ({
+    addEventListener: vi.fn(),
+    postMessage: vi.fn(),
+    terminate: vi.fn(),
+  })),
+);
+
+// Create a mock URL class that works as a constructor
+class MockURL {
+  href: string;
+  constructor(url: string, base?: string | URL) {
+    this.href = base ? `${base}/${url}` : url;
+  }
+  static createObjectURL = vi.fn(() => "blob:mock-url");
+  static revokeObjectURL = vi.fn();
+}
+vi.stubGlobal("URL", MockURL);
+
+// Mock the worker RPC before importing the bridge
+const mockBridge = vi.fn();
+const mockLoadPackages = vi.fn();
+
+vi.mock("@/core/wasm/rpc", () => ({
+  getWorkerRPC: () => ({
+    proxy: {
+      request: {
+        bridge: mockBridge,
+        loadPackages: mockLoadPackages,
+        startSession: vi.fn(),
+      },
+      send: {
+        consumerReady: vi.fn(),
+      },
+    },
+    addMessageListener: vi.fn(),
+  }),
+}));
+
+// Mock the parse module to avoid DOM dependencies
+vi.mock("../parse", () => ({
+  parseMarimoIslandApps: () => [],
+  createMarimoFile: vi.fn(),
+}));
+
+// Mock uuid to have predictable tokens
+vi.mock("@/utils/uuid", () => ({
+  generateUUID: () => "test-uuid-12345",
+}));
+
+// Mock getMarimoVersion
+vi.mock("@/core/meta/globals", () => ({
+  getMarimoVersion: () => "0.0.0-test",
+}));
+
+// Mock the jotai store
+vi.mock("@/core/state/jotai", () => ({
+  store: {
+    set: vi.fn(),
+  },
+}));
+
+// Now import the bridge class
+import { IslandsPyodideBridge } from "../bridge";
+
+describe("IslandsPyodideBridge", () => {
+  let bridge: IslandsPyodideBridge;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset the singleton by clearing the window property
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (window as any)._marimo_private_IslandsPyodideBridge;
+    // Access the singleton - creates a fresh instance
+    bridge = IslandsPyodideBridge.INSTANCE;
+  });
+
+  afterEach(() => {
+    // Clean up singleton
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (window as any)._marimo_private_IslandsPyodideBridge;
+  });
+
+  describe("sendComponentValues", () => {
+    it("should include type field and token in control request", async () => {
+      const request = {
+        objectIds: ["Hbol-0"],
+        values: [58],
+      };
+
+      await bridge.sendComponentValues(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: {
+          type: "update-ui-element",
+          objectIds: ["Hbol-0"],
+          values: [58],
+          token: "test-uuid-12345",
+        },
+      });
+    });
+
+    it("should preserve all request properties", async () => {
+      const request = {
+        objectIds: ["slider-1", "slider-2"],
+        values: [10, 20],
+      };
+
+      await bridge.sendComponentValues(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: expect.objectContaining({
+          type: "update-ui-element",
+          objectIds: ["slider-1", "slider-2"],
+          values: [10, 20],
+        }),
+      });
+    });
+  });
+
+  describe("sendFunctionRequest", () => {
+    it("should include type field in control request", async () => {
+      const request = {
+        functionCallId: "call-123",
+        namespace: "test_namespace",
+        functionName: "my_function",
+        args: { x: 1, y: 2 },
+      };
+
+      await bridge.sendFunctionRequest(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: {
+          type: "invoke-function",
+          functionCallId: "call-123",
+          namespace: "test_namespace",
+          functionName: "my_function",
+          args: { x: 1, y: 2 },
+        },
+      });
+    });
+  });
+
+  describe("sendRun", () => {
+    it("should include type field in control request", async () => {
+      const request = {
+        cellIds: ["cell-1", "cell-2"],
+        codes: ["print('hello')", "print('world')"],
+      };
+
+      await bridge.sendRun(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: {
+          type: "execute-cells",
+          cellIds: ["cell-1", "cell-2"],
+          codes: ["print('hello')", "print('world')"],
+        },
+      });
+    });
+
+    it("should call loadPackages before putControlRequest", async () => {
+      const request = {
+        cellIds: ["cell-1"],
+        codes: ["import pandas"],
+      };
+
+      await bridge.sendRun(request);
+
+      // Verify loadPackages was called with joined codes
+      expect(mockLoadPackages).toHaveBeenCalledWith("import pandas");
+
+      // Verify order: loadPackages should be called before bridge
+      const loadPackagesCallOrder =
+        mockLoadPackages.mock.invocationCallOrder[0];
+      const bridgeCallOrder = mockBridge.mock.invocationCallOrder[0];
+      expect(loadPackagesCallOrder).toBeLessThan(bridgeCallOrder);
+    });
+  });
+
+  describe("sendModelValue", () => {
+    it("should include type field in control request", async () => {
+      const request = {
+        modelId: "widget-1",
+        message: {
+          state: { value: 42 },
+          bufferPaths: [],
+        },
+      };
+
+      await bridge.sendModelValue(request);
+
+      expect(mockBridge).toHaveBeenCalledWith({
+        functionName: "put_control_request",
+        payload: {
+          type: "update-widget-model",
+          modelId: "widget-1",
+          message: {
+            state: { value: 42 },
+            bufferPaths: [],
+          },
+        },
+      });
+    });
+  });
+
+  describe("control request message format", () => {
+    it("should always include the type field required by msgspec", async () => {
+      // Test all methods to ensure they include the type field
+      await bridge.sendComponentValues({ objectIds: [], values: [] });
+      await bridge.sendFunctionRequest({
+        functionCallId: "",
+        namespace: "",
+        functionName: "",
+        args: {},
+      });
+      await bridge.sendRun({ cellIds: [], codes: [] });
+      await bridge.sendModelValue({
+        modelId: "",
+        message: { state: {}, bufferPaths: [] },
+      });
+
+      // All calls should have the type field
+      const allCalls = mockBridge.mock.calls;
+      for (const call of allCalls) {
+        const payload = call[0].payload;
+        expect(payload).toHaveProperty("type");
+        expect(typeof payload.type).toBe("string");
+      }
+    });
+  });
+});

package/src/core/islands/bridge.ts

@@ -6,7 +6,8 @@ import { Deferred } from "@/utils/Deferred";
 import { throwNotImplemented } from "@/utils/functions";
 import type { JsonString } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
-import type { NotificationPayload } from "../kernel/messages";
+import { generateUUID } from "@/utils/uuid";
+import type { CommandMessage, NotificationPayload } from "../kernel/messages";
 import { getMarimoVersion } from "../meta/globals";
 import type { EditRequests, RunRequests } from "../network/types";
 import { store } from "../state/jotai";
@@ -104,7 +105,11 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   sendComponentValues: RunRequests["sendComponentValues"] = async (
     request,
   ): Promise<null> => {
-    await this.putControlRequest(request);
+    await this.putControlRequest({
+      type: "update-ui-element",
+      ...request,
+      token: generateUUID(),
+    });
     return null;
   };
 
@@ -117,18 +122,27 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   sendFunctionRequest: RunRequests["sendFunctionRequest"] = async (
     request,
   ): Promise<null> => {
-    await this.putControlRequest(request);
+    await this.putControlRequest({
+      type: "invoke-function",
+      ...request,
+    });
     return null;
   };
 
   sendRun: EditRequests["sendRun"] = async (request): Promise<null> => {
     await this.rpc.proxy.request.loadPackages(request.codes.join("\n"));
-    await this.putControlRequest(request);
+    await this.putControlRequest({
+      type: "execute-cells",
+      ...request,
+    });
     return null;
   };
 
   sendModelValue: RunRequests["sendModelValue"] = async (request) => {
-    await this.putControlRequest(request);
+    await this.putControlRequest({
+      type: "update-widget-model",
+      ...request,
+    });
     return null;
   };
 
@@ -187,7 +201,9 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   clearCache = throwNotImplemented;
   getCacheInfo = throwNotImplemented;
 
-  private async putControlRequest(operation: object) {
+  // The kernel uses msgspec to parse control requests, which requires a 'type'
+  // field for discriminated union deserialization.
+  private async putControlRequest(operation: CommandMessage) {
     await this.rpc.proxy.request.bridge({
       functionName: "put_control_request",
       payload: operation,

package/src/core/run-app.tsx

@@ -1,11 +1,14 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
+import { ArrowLeftIcon } from "lucide-react";
 import { useEffect } from "react";
 import { AppContainer } from "@/components/editor/app-container";
 import { AppHeader } from "@/components/editor/header/app-header";
 import { Spinner } from "@/components/icons/spinner";
+import { buttonVariants } from "@/components/ui/button";
 import { DelayMount } from "@/components/utils/delay-mount";
+import { cn } from "@/utils/cn";
 import { CellsRenderer } from "../components/editor/renderers/cells-renderer";
 import { notebookIsRunningAtom, useCellActions } from "./cells/cells";
 import type { AppConfig } from "./config/config-schema";
@@ -75,15 +78,19 @@ export const RunApp: React.FC<AppProps> = ({ appConfig }) => {
       isRunning={isRunning}
       width={appConfig.width}
     >
-      <AppHeader connection={connection} className={"sm:pt-8"}>
+      <AppHeader connection={connection} className="sm:pt-8">
         {galleryHref && (
-          <div className="flex items-center px-6 pt-4">
+          <div className="flex items-center px-6 pt-4 sm:-mt-8">
             <a
               href={galleryHref}
               aria-label="Back to gallery"
-              className="inline-flex items-center"
+              className={cn(
+                buttonVariants({ variant: "text", size: "sm" }),
+                "gap-2 px-0 text-muted-foreground hover:text-foreground",
+              )}
             >
-              <img src="logo.png" alt="marimo logo" className="h-6 w-auto" />
+              <ArrowLeftIcon className="size-4" aria-hidden={true} />
+              <span>Back</span>
             </a>
           </div>
         )}

package/src/plugins/core/registerReactComponent.tsx

@@ -101,10 +101,17 @@ function PluginSlotInternal<T>(
     return plugin.validator.safeParse(parseDataset(hostElement));
   });
 
+  // Incremented on each reset to invalidate memoized function references.
+  // This ensures that plugin functions (e.g., search) are re-created when
+  // the underlying UI element instance changes (new object-id), even if
+  // the element's data attributes haven't changed.
+  const [resetNonce, setResetNonce] = useState(0);
+
   useImperativeHandle(ref, () => ({
     reset: () => {
       setValue(getInitialValue());
       setParsedResult(plugin.validator.safeParse(parseDataset(hostElement)));
+      setResetNonce((n) => n + 1);
     },
     setChildren: (children) => {
       setChildNodes(children);
@@ -224,7 +231,8 @@ function PluginSlotInternal<T>(
     }
 
     return methods;
-  }, [plugin.functions, hostElement]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [plugin.functions, hostElement, resetNonce]);
 
   // If we failed to parse the initial value, render an error
   if (!parsedResult.success) {

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

@@ -0,0 +1,164 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { Provider } from "jotai";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import type { DownloadAsArgs } from "@/components/data-table/schemas";
+import type { FieldTypesWithExternalType } from "@/components/data-table/types";
+import { store } from "@/core/state/jotai";
+import {
+  type GetDataUrl,
+  type GetRowIds,
+  LoadingDataTableComponent,
+} from "../DataTablePlugin";
+
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {
+      // do nothing
+    }
+    unobserve() {
+      // do nothing
+    }
+    disconnect() {
+      // do nothing
+    }
+  };
+});
+
+describe("LoadingDataTableComponent", () => {
+  /**
+   * Regression test for https://github.com/marimo-team/marimo/issues/8023
+   *
+   * When a table is replaced via mo.output.replace() with updated data,
+   * but the initial page data (unsorted first page) hasn't changed,
+   * the useAsyncData hook's deps may all remain the same.
+   * Previously, the `search` function reference was memoized on
+   * [plugin.functions, hostElement] and wouldn't change on reset(),
+   * so the useAsyncData effect wouldn't re-fire.
+   *
+   * The fix adds a resetNonce to the functionMethods memo deps,
+   * so when the plugin is reset (table instance changes), the search
+   * function reference changes, triggering useAsyncData to re-fetch.
+   *
+   * This test verifies that when the search function reference changes
+   * (simulating reset()), the component re-fetches data even if
+   * props.data hasn't changed.
+   */
+  it("should refetch data when search function reference changes", async () => {
+    const host = document.createElement("div");
+    const setValue = vi.fn();
+
+    // The initial page data string - identical for both renders.
+    // This simulates the case where only a row on page 2 changed,
+    // so the first page data is the same.
+    const initialPageData = JSON.stringify([
+      { id: 1, status: "pending", value: 10 },
+      { id: 2, status: "pending", value: 20 },
+      { id: 3, status: "pending", value: 30 },
+    ]);
+
+    const searchResult = {
+      data: [
+        { id: 1, status: "pending", value: 10 },
+        { id: 2, status: "pending", value: 20 },
+        { id: 3, status: "pending", value: 30 },
+      ],
+      total_rows: 4,
+      cell_styles: null,
+      cell_hover_texts: null,
+    };
+
+    const searchFn1 = vi.fn().mockResolvedValue(searchResult);
+    const searchFn2 = vi.fn().mockResolvedValue(searchResult);
+
+    const fieldTypes: FieldTypesWithExternalType = [
+      ["id", ["integer", "integer"]],
+      ["status", ["string", "string"]],
+      ["value", ["integer", "integer"]],
+    ];
+
+    const commonProps = {
+      label: null,
+      totalRows: 4,
+      pagination: true,
+      pageSize: 3,
+      selection: "single" as const,
+      showDownload: false,
+      showFilters: false,
+      showColumnSummaries: false as const,
+      showDataTypes: false,
+      showPageSizeSelector: false,
+      showColumnExplorer: false,
+      showRowExplorer: false,
+      showChartBuilder: false,
+      rowHeaders: [] as FieldTypesWithExternalType,
+      fieldTypes,
+      totalColumns: 3,
+      maxColumns: "all" as const,
+      hasStableRowId: false,
+      lazy: false,
+      host,
+      enableSearch: true,
+      value: [] as (number | string | { rowId: string; columnName?: string })[],
+      setValue,
+      download_as: vi.fn() as DownloadAsArgs,
+      get_column_summaries: vi.fn().mockResolvedValue({
+        data: null,
+        stats: {},
+        bin_values: {},
+        value_counts: {},
+        show_charts: false,
+      }),
+      get_data_url: vi.fn() as GetDataUrl,
+      get_row_ids: vi.fn() as GetRowIds,
+    };
+
+    const Wrapper = ({ children }: { children: React.ReactNode }) => (
+      <Provider store={store}>
+        <TooltipProvider>{children}</TooltipProvider>
+      </Provider>
+    );
+
+    // Render with first search function
+    const { rerender } = render(
+      <Wrapper>
+        <LoadingDataTableComponent
+          {...commonProps}
+          data={initialPageData}
+          search={searchFn1}
+        />
+      </Wrapper>,
+    );
+
+    // Wait for the table to render with data
+    await waitFor(() => {
+      expect(screen.getAllByRole("row").length).toBeGreaterThan(1);
+    });
+
+    // Search was called on initial load (fire-and-forget for canShowInitialPage)
+    expect(searchFn1).toHaveBeenCalled();
+
+    // Now rerender with the same data but a NEW search function reference.
+    // This simulates what happens after reset() when resetNonce increments
+    // and functionMethods is recreated.
+    await act(async () => {
+      rerender(
+        <Wrapper>
+          <LoadingDataTableComponent
+            {...commonProps}
+            data={initialPageData}
+            search={searchFn2}
+          />
+        </Wrapper>,
+      );
+    });
+
+    // The new search function should be called because the search
+    // dependency changed in useAsyncData.
+    await waitFor(() => {
+      expect(searchFn2).toHaveBeenCalled();
+    });
+  });
+});