@marimo-team/frontend 0.25.2 → 0.25.3-dev100

package/src/components/chat/chat-panel.tsx

@@ -166,7 +166,12 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   return (
     <div className="flex border-b px-2 py-1 justify-between shrink-0 items-center">
       <Tooltip content="New chat">
-        <Button variant="text" size="icon" onClick={onNewChat}>
+        <Button
+          aria-label="New chat"
+          variant="text"
+          size="icon"
+          onClick={onNewChat}
+        >
           <PlusIcon className="h-4 w-4" />
         </Button>
       </Tooltip>
@@ -716,14 +721,10 @@ const ChatPanelBody = () => {
   );
 
   const isLoading = status === "submitted" || status === "streaming";
-  // Read via a ref so the queue-vs-send decision stays correct even when it is
-  // made after an `await` (e.g. resolving @-context), by which point the render
-  // closure's `isLoading` may be stale.
-  const isLoadingRef = useRef(isLoading);
-  isLoadingRef.current = isLoading;
-
+  // useEvent reads the latest loading state, even when called after an await
+  // (e.g. resolving @-context) that outlives the original render's closure.
   const submitOrQueue = useEvent((parts: ChatMessagePart[]) => {
-    if (isLoadingRef.current || hasQueuedRef.current) {
+    if (isLoading || hasQueuedRef.current) {
       enqueueUserMessage(parts);
     } else {
       sendUserMessage(parts);

package/src/components/chat/chat-utils.ts

@@ -294,16 +294,12 @@ export function useMessageQueue() {
   // invoked from a callback (e.g. `onFinish`) in the same tick as `enqueue`.
   const messagesRef = useRef<QueuedUserMessage[]>([]);
   const hasQueuedRef = useRef(false);
-  messagesRef.current = messages;
-  hasQueuedRef.current = messages.length > 0;
 
   const enqueue = useEvent((parts: ChatMessagePart[]) => {
-    setMessages((prev) => {
-      const next = [...prev, { id: generateUUID(), parts }];
-      messagesRef.current = next;
-      hasQueuedRef.current = true;
-      return next;
-    });
+    const next = [...messagesRef.current, { id: generateUUID(), parts }];
+    messagesRef.current = next;
+    hasQueuedRef.current = true;
+    setMessages(next);
   });
 
   const flushNext = useEvent((send: (parts: ChatMessagePart[]) => void) => {

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

@@ -8,6 +8,7 @@ import {
 import { fireEvent, render, screen, within } from "@testing-library/react";
 import { beforeAll, describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import type { PreviewColumn } from "@/plugins/impl/DataTablePlugin";
 import { ColumnExplorerPanel } from "../column-explorer-panel/column-explorer";
 import type { FieldTypesWithExternalType } from "../types";
 
@@ -36,11 +37,13 @@ const TEST_COLUMNS: ColumnDef<Row>[] = [
 interface HarnessProps {
   totalColumns?: number;
   initiallyHidden?: readonly string[];
+  previewColumn?: PreviewColumn;
 }
 
 function PanelHarness({
   totalColumns = 3,
   initiallyHidden = EMPTY_HIDDEN_COLUMNS,
+  previewColumn = vi.fn().mockResolvedValue({}),
 }: HarnessProps) {
   const table = useReactTable<Row>({
     data: [],
@@ -55,7 +58,7 @@ function PanelHarness({
   });
   return (
     <ColumnExplorerPanel
-      previewColumn={vi.fn().mockResolvedValue({})}
+      previewColumn={previewColumn}
       fieldTypes={FIELD_TYPES}
       totalRows={3}
       totalColumns={totalColumns}
@@ -124,6 +127,29 @@ describe("ColumnExplorerPanel search", () => {
   });
 });
 
+describe("ColumnExplorerPanel chart actions", () => {
+  it("names chart actions for each expanded column", async () => {
+    const previewColumn = vi.fn<PreviewColumn>().mockResolvedValue({
+      chart_code: "chart_code",
+      chart_spec: null,
+      error: null,
+      missing_packages: null,
+      stats: null,
+    });
+    renderPanel({ previewColumn });
+    fireEvent.click(screen.getByText("cust_age"));
+
+    for (const column of ["customer_name", "cust_age"]) {
+      expect(
+        await screen.findByRole("button", {
+          name: `Add chart to notebook for ${column}`,
+        }),
+      ).toBeInTheDocument();
+      expect(previewColumn).toHaveBeenCalledWith({ column });
+    }
+  });
+});
+
 describe("ColumnExplorerPanel header counts", () => {
   it("uses rendered-subset total when a clipped column is hidden", () => {
     // Dataset has 100 columns server-side; only 3 are rendered into the

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

@@ -14,6 +14,7 @@ import {
   renderCellValue,
 } from "../columns";
 import { getMimeValues, isMimeValue, MimeCell } from "../mime-cell";
+import { buildHighlightPattern } from "../search-highlight";
 import type { FieldTypesWithExternalType } from "../types";
 import { uniformSample } from "../uniformSample";
 import { UrlDetector } from "../url-detector";
@@ -240,6 +241,7 @@ describe("generateColumns", () => {
     // "age" is a number column — should auto right-align
     // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
+      table: { options: { meta: {} } },
       column: {
         columnDef: columns[1],
       },
@@ -251,6 +253,7 @@ describe("generateColumns", () => {
     // "name" is a string column — should remain left-aligned
     // oxlint-disable-next-line typescript/no-explicit-any
     const nameCell = (columns[0].cell as any)({
+      table: { options: { meta: {} } },
       column: {
         columnDef: columns[0],
       },
@@ -271,6 +274,7 @@ describe("generateColumns", () => {
     // "age" is numeric but explicitly set to left
     // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
+      table: { options: { meta: {} } },
       column: {
         columnDef: columns[1],
       },
@@ -311,6 +315,7 @@ describe("generateColumns", () => {
     // Assuming getCellStyleClass is a function that returns a class name
     // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[0].cell as any)({
+      table: { options: { meta: {} } },
       column: {
         columnDef: columns[0],
       },
@@ -1359,3 +1364,103 @@ test("column_widths sets fixed size and meta.width", () => {
   expect(b?.size).toBeUndefined();
   expect(b?.meta?.width).toBeUndefined();
 });
+
+describe("renderCellValue with highlightPattern", () => {
+  const createColumn = (
+    dataType: "string" | "number" | "boolean" | "date",
+    dtype = "object",
+  ) =>
+    ({
+      id: "col",
+      columnDef: { meta: { dataType, dtype } },
+      getColumnFormatting: () => undefined,
+      getColumnWrapping: () => undefined,
+      applyColumnFormatting: (value: unknown) => value,
+    }) as unknown as Column<unknown>;
+
+  const renderCell = (
+    column: Column<unknown>,
+    value: unknown,
+    highlightQuery: string,
+  ) =>
+    render(
+      <I18nProvider locale="en-US">
+        <TooltipProvider>
+          {renderCellValue({
+            column,
+            renderValue: () => value,
+            getValue: () => value,
+            selectCell: undefined,
+            cellStyles: "",
+            highlightPattern: buildHighlightPattern(highlightQuery),
+          })}
+        </TooltipProvider>
+      </I18nProvider>,
+    );
+
+  const markTexts = (container: HTMLElement) =>
+    [...container.querySelectorAll("mark")].map((m) => m.textContent);
+
+  it("marks a match in a string cell", () => {
+    const { container } = renderCell(
+      createColumn("string"),
+      "Alice Smith",
+      "smi",
+    );
+    expect(markTexts(container)).toEqual(["Smi"]);
+  });
+
+  it("marks only the middle text when the string has edge whitespace", () => {
+    const { container } = renderCell(createColumn("string"), "  a b  ", " ");
+    expect(markTexts(container)).toEqual([" "]);
+    const edgeMarkers = container.querySelectorAll("span[aria-label]");
+    expect(edgeMarkers).toHaveLength(2);
+    for (const marker of edgeMarkers) {
+      expect(marker.querySelector("mark")).toBeNull();
+    }
+  });
+
+  it("marks a match in the locale display of a number", () => {
+    const { container } = renderCell(createColumn("number"), 1234.5, "234");
+    expect(markTexts(container)).toEqual(["234"]);
+    expect(container.textContent).toBe("1,234.5");
+  });
+
+  it("does not mark a number when the locale display hides the raw match", () => {
+    const { container } = renderCell(createColumn("number"), 1234, "1234");
+    expect(markTexts(container)).toEqual([]);
+    expect(container.textContent).toBe("1,234");
+  });
+
+  it("marks a boolean cell", () => {
+    const { container } = renderCell(createColumn("boolean"), false, "false");
+    expect(markTexts(container)).toEqual(["False"]);
+  });
+
+  it("marks a date cell by its display string", () => {
+    const { container } = renderCell(
+      createColumn("date", "date"),
+      new Date(2026, 0, 15),
+      "2026",
+    );
+    expect(markTexts(container)).toEqual(["2026"]);
+  });
+
+  it("renders no mark for an empty query", () => {
+    for (const [column, value] of [
+      [createColumn("string"), "Alice"],
+      [createColumn("number"), 12],
+      [createColumn("boolean"), false],
+      [createColumn("date", "date"), new Date(2026, 0, 15)],
+    ] as const) {
+      const { container } = renderCell(column, value, "");
+      expect(markTexts(container)).toEqual([]);
+    }
+  });
+
+  it("renders no mark in the trigger of a long-string popout", () => {
+    const value = "x".repeat(60);
+    const { container } = renderCell(createColumn("string"), value, "xxx");
+    expect(markTexts(container)).toEqual([]);
+  });
+});

package/src/components/data-table/__tests__/context-menu-interaction.test.tsx

@@ -0,0 +1,130 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { type Cell, createTable, getCoreRowModel } from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useRef } from "react";
+import { expect, it, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { DataTableContextMenu } from "../context-menu";
+
+SetupMocks.resizeObserver();
+
+const rows = [{ value: "first" }, { value: "second" }];
+const columns = [
+  { accessorKey: "value", meta: { filterType: "text" as const } },
+];
+
+function createCells() {
+  const table = createTable({
+    data: rows,
+    columns,
+    locale: "en-US",
+    getCoreRowModel: getCoreRowModel(),
+    onColumnFiltersChange: () => undefined,
+    state: {},
+    onStateChange: () => undefined,
+    renderFallbackValue: null,
+  });
+  return table.getRowModel().rows.map((row) => row.getAllCells()[0]);
+}
+
+function Harness({ cells }: { cells: Cell<(typeof rows)[number], unknown>[] }) {
+  const contextMenuRef = useRef<Cell<(typeof rows)[number], unknown> | null>(
+    null,
+  );
+  const tableRef = useRef<HTMLTableSectionElement>(null);
+  const tableBody = (
+    <tbody ref={tableRef}>
+      <tr>
+        <td>empty</td>
+      </tr>
+      {cells.map((cell) => {
+        return (
+          <tr key={cell.id}>
+            <td
+              data-cell-id={cell.id}
+              onContextMenu={() => {
+                contextMenuRef.current = cell;
+              }}
+            >
+              {String(cell.getValue())}
+            </td>
+          </tr>
+        );
+      })}
+    </tbody>
+  );
+  return (
+    <table>
+      <DataTableContextMenu
+        contextMenuRef={contextMenuRef}
+        tableRef={tableRef}
+        tableBody={tableBody}
+        copyAllCells={() => undefined}
+      />
+    </table>
+  );
+}
+
+it("filters the latest right-clicked cell when the menu is already open", () => {
+  const onFilter = vi.fn();
+  const table = createTable({
+    data: rows,
+    columns,
+    locale: "en-US",
+    getCoreRowModel: getCoreRowModel(),
+    onColumnFiltersChange: onFilter,
+    state: {},
+    onStateChange: () => undefined,
+    renderFallbackValue: null,
+  });
+  render(
+    <Harness
+      cells={table.getRowModel().rows.map((row) => row.getAllCells()[0])}
+    />,
+  );
+
+  const firstCell = screen.getByText("first");
+  const secondCell = screen.getByText("second");
+  fireEvent.contextMenu(firstCell);
+  expect(firstCell).toHaveClass("bg-(--green-4)");
+  expect(
+    screen.getByRole("menuitem", { name: "Filter by this value" }),
+  ).toBeInTheDocument();
+  fireEvent.contextMenu(secondCell);
+  expect(firstCell).not.toHaveClass("bg-(--green-4)");
+  expect(secondCell).toHaveClass("bg-(--green-4)");
+  fireEvent.click(
+    screen.getByRole("menuitem", { name: "Filter by this value" }),
+  );
+  expect(firstCell).not.toHaveClass("bg-(--green-4)");
+  expect(secondCell).not.toHaveClass("bg-(--green-4)");
+
+  const update = onFilter.mock.calls.at(-1)?.[0];
+  expect(update([])).toEqual([
+    {
+      id: "value",
+      value: { type: "text", operator: "equals", text: "second" },
+    },
+  ]);
+});
+
+it("does not reuse a previous cell after the menu closes", () => {
+  render(<Harness cells={createCells()} />);
+
+  const firstCell = screen.getByText("first");
+  fireEvent.contextMenu(firstCell);
+  expect(firstCell).toHaveClass("bg-(--green-4)");
+  fireEvent.keyDown(document.activeElement ?? document.body, {
+    key: "Escape",
+  });
+  expect(firstCell).not.toHaveClass("bg-(--green-4)");
+  expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+
+  // Right-clicking outside any data cell must not resurrect the old one
+  fireEvent.contextMenu(screen.getByText("empty"));
+  expect(firstCell).not.toHaveClass("bg-(--green-4)");
+  expect(
+    screen.queryByRole("menuitem", { name: "Filter by this value" }),
+  ).not.toBeInTheDocument();
+});

package/src/components/data-table/__tests__/context-menu.test.ts

@@ -0,0 +1,176 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { buildCellFilter } from "../context-menu";
+
+describe("buildCellFilter", () => {
+  // Use a non-UTC, non-DST-ambiguous offset so date-only parsing bugs
+  // (UTC vs. local midnight) can't hide behind a host machine that
+  // happens to run in UTC.
+  let originalTimezone: string | undefined;
+  beforeAll(() => {
+    originalTimezone = process.env.TZ;
+    process.env.TZ = "America/New_York";
+  });
+  afterAll(() => {
+    process.env.TZ = originalTimezone;
+  });
+
+  it("builds an equality filter for a normal date value", () => {
+    const filter = buildCellFilter({
+      type: "date",
+      value: "2024-01-15",
+      comparison: "eq",
+      dataType: "date",
+      dtype: "date",
+    });
+    expect(filter).toEqual({
+      type: "date",
+      operator: "==",
+      // Must be local midnight, not `new Date("2024-01-15")` (UTC
+      // midnight), or the filter shifts by a day in UTC- timezones.
+      value: new Date(2024, 0, 15),
+    });
+  });
+
+  it("returns undefined for an empty-string date value in a non-temporal-looking context", () => {
+    const filter = buildCellFilter({
+      type: "date",
+      value: "",
+      comparison: "eq",
+      dataType: "date",
+      dtype: "date",
+    });
+    expect(filter).toBeUndefined();
+  });
+
+  it("returns undefined for an unparsable date value instead of an Invalid Date filter", () => {
+    const filter = buildCellFilter({
+      type: "date",
+      value: "not-a-date",
+      comparison: "eq",
+      dataType: "date",
+      dtype: "date",
+    });
+    expect(filter).toBeUndefined();
+  });
+
+  it("builds an equality filter for a normal datetime value", () => {
+    const filter = buildCellFilter({
+      type: "datetime",
+      value: "2024-01-15 08:30:00",
+      comparison: "eq",
+      dataType: "datetime",
+      dtype: "datetime64[ns]",
+    });
+    expect(filter).toEqual({
+      type: "datetime",
+      operator: "==",
+      value: new Date(2024, 0, 15, 8, 30, 0),
+    });
+  });
+
+  it("returns undefined for an unparsable datetime value", () => {
+    const filter = buildCellFilter({
+      type: "datetime",
+      value: "not-a-datetime",
+      comparison: "eq",
+      dataType: "datetime",
+      dtype: "datetime64[ns]",
+    });
+    expect(filter).toBeUndefined();
+  });
+
+  it("builds an equality filter for a normal time value", () => {
+    const filter = buildCellFilter({
+      type: "time",
+      value: "08:30:00",
+      comparison: "eq",
+      dataType: "time",
+    });
+    expect(filter).toEqual({
+      type: "time",
+      operator: "==",
+      value: new Date(1970, 0, 1, 8, 30, 0),
+    });
+  });
+
+  it("returns undefined instead of an unparsable time value", () => {
+    const filter = buildCellFilter({
+      type: "time",
+      value: "25:00:00",
+      comparison: "eq",
+      dataType: "time",
+    });
+    expect(filter).toBeUndefined();
+  });
+
+  it("maps a NaT date value to is_null instead of an invalid Date filter", () => {
+    const filter = buildCellFilter({
+      type: "date",
+      value: "NaT",
+      comparison: "eq",
+      dataType: "date",
+      dtype: "date",
+    });
+    expect(filter).toEqual({ type: "date", operator: "is_null" });
+  });
+
+  it("maps a NaT datetime value to is_not_null for the neq comparison", () => {
+    const filter = buildCellFilter({
+      type: "datetime",
+      value: "NaT",
+      comparison: "neq",
+      dataType: "datetime",
+      dtype: "datetime64[ns]",
+    });
+    expect(filter).toEqual({ type: "datetime", operator: "is_not_null" });
+  });
+
+  it("does not treat the string 'NaT' in a non-temporal column as a sentinel", () => {
+    const filter = buildCellFilter({
+      type: "text",
+      value: "NaT",
+      comparison: "eq",
+      dataType: "string",
+    });
+    expect(filter).toEqual({ type: "text", operator: "equals", text: "NaT" });
+  });
+
+  it("maps an actual null value to is_null", () => {
+    const filter = buildCellFilter({
+      type: "number",
+      value: null,
+      comparison: "eq",
+      dataType: "number",
+    });
+    expect(filter).toEqual({ type: "number", operator: "is_null" });
+  });
+
+  it("builds a literal (always-false) equality filter for a NaN number value", () => {
+    // NaN is a real float value, not a missing-value marker like null/NaT,
+    // and the backend's is_null() (narwhals/polars semantics) doesn't match
+    // it, so it falls through to a normal (if unsatisfiable) == filter.
+    const filter = buildCellFilter({
+      type: "number",
+      value: Number.NaN,
+      comparison: "eq",
+      dataType: "number",
+    });
+    expect(filter).toEqual({
+      type: "number",
+      operator: "==",
+      value: Number.NaN,
+    });
+  });
+
+  it("builds a literal equality filter for a normal number value", () => {
+    const filter = buildCellFilter({
+      type: "number",
+      value: 42,
+      comparison: "eq",
+      dataType: "number",
+    });
+    expect(filter).toEqual({ type: "number", operator: "==", value: 42 });
+  });
+});

package/src/components/data-table/__tests__/date-filter-inputs.test.tsx

@@ -1,7 +1,30 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
 import { dateToLocalISODate } from "@/utils/dates";
-import { parsePastedRange } from "../date-filter-inputs";
+import { parsePastedDate, parsePastedRange } from "../date-filter-inputs";
+
+describe("parsePastedDate", () => {
+  it("parses a time-only string for the time filter type", () => {
+    const result = parsePastedDate("time", "2:30 PM");
+    expect(result).toEqual(new Date(1970, 0, 1, 14, 30));
+  });
+
+  it("parses a local ISO datetime for the datetime filter type", () => {
+    const result = parsePastedDate("datetime", "2026-02-01T08:30:00");
+    expect(result).toEqual(new Date(2026, 1, 1, 8, 30, 0));
+  });
+
+  it("falls back to the Date constructor for other formats", () => {
+    const result = parsePastedDate("datetime", "Feb 1, 2026 08:30:00");
+    expect(result).toBeDefined();
+    expect(result?.getFullYear()).toBe(2026);
+  });
+
+  it("returns undefined for an empty or unparsable string", () => {
+    expect(parsePastedDate("date", "")).toBeUndefined();
+    expect(parsePastedDate("time", "not-a-time")).toBeUndefined();
+  });
+});
 
 describe("parsePastedRange", () => {
   it.each([

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

@@ -0,0 +1,72 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { I18nProvider } from "react-aria";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { DatePopover } from "../date-popover";
+
+vi.mock("@/components/ui/tooltip", () => ({
+  Tooltip: ({ content }: { content: ReactNode }) => content,
+}));
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("DatePopover", () => {
+  it.each([0, 123])(
+    "updates the local timezone and time on rerender with %i milliseconds",
+    (milliseconds) => {
+      const NativeDateTimeFormat = Intl.DateTimeFormat;
+      let systemTimezone = "America/Los_Angeles";
+      vi.spyOn(Intl, "DateTimeFormat").mockImplementation(
+        function (locales, options) {
+          return new NativeDateTimeFormat(locales, {
+            ...options,
+            timeZone: options?.timeZone ?? systemTimezone,
+          });
+        },
+      );
+
+      const date = new Date("2026-01-15T12:00:00Z");
+      date.setUTCMilliseconds(milliseconds);
+      const content = () => (
+        <I18nProvider locale="en-US">
+          <DatePopover date={date} type="datetime">
+            timestamp
+          </DatePopover>
+        </I18nProvider>
+      );
+      const { rerender } = render(content());
+      const previousTime =
+        screen.getByText(systemTimezone).nextElementSibling?.textContent;
+      const utcTime = screen.getByText("UTC").nextElementSibling?.textContent;
+
+      systemTimezone = "Asia/Tokyo";
+      rerender(content());
+
+      const expected = new NativeDateTimeFormat("en-US", {
+        timeZone: systemTimezone,
+        ...(milliseconds
+          ? {
+              year: "numeric",
+              month: "2-digit",
+              day: "2-digit",
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit",
+              fractionalSecondDigits: 3,
+            }
+          : { dateStyle: "long", timeStyle: "medium" }),
+      }).format(date);
+      expect(screen.queryByText("America/Los_Angeles")).toBeNull();
+      expect(
+        screen.getByText(systemTimezone).nextElementSibling?.textContent,
+      ).toBe(expected);
+      expect(expected).not.toBe(previousTime);
+      expect(screen.getByText("UTC").nextElementSibling?.textContent).toBe(
+        utcTime,
+      );
+    },
+  );
+});