@marimo-team/frontend 0.25.2 → 0.25.3-dev12

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

@@ -54,6 +54,7 @@ function renderExportActions(
   props: Partial<ExportActionProps> = {},
   sizeLimit: { limitBytes: number; unavailableMessage: string } | null = null,
   mode: AppMode = "edit",
+  strictMode = false,
 ) {
   const store = createStore();
   store.set(downloadSizeLimitAtom, sizeLimit);
@@ -66,7 +67,7 @@ function renderExportActions(
       </TooltipProvider>
     </Provider>
   );
-  const result = render(view(props));
+  const result = render(view(props), { reactStrictMode: strictMode });
   return {
     ...result,
     rerenderExportActions: (nextProps: Partial<ExportActionProps>) =>
@@ -284,7 +285,7 @@ describe("ExportActions dialog", () => {
     await waitFor(() => {
       expect(downloadByURL).toHaveBeenCalled();
     });
-    expect(getExportMetadata).toHaveBeenCalledTimes(2);
+    expect(getExportMetadata).toHaveBeenCalledTimes(3);
     expect(
       screen.queryByText("GeoParquet export requires pyarrow."),
     ).not.toBeInTheDocument();
@@ -310,10 +311,10 @@ describe("ExportActions dialog", () => {
       mocks.handleInstallPackages.mock.calls[0][1]();
     });
     await waitFor(() => {
-      expect(getExportMetadata).toHaveBeenCalledTimes(2);
+      expect(getExportMetadata).toHaveBeenCalledTimes(3);
     });
     expect(
-      screen.getByRole("button", { name: "Install pyarrow" }),
+      await screen.findByRole("button", { name: "Install pyarrow" }),
     ).toBeInTheDocument();
     expect(
       screen.getByRole("button", { name: "Download GeoParquet" }),
@@ -530,6 +531,328 @@ describe("ExportActions dialog", () => {
     expect(downloadByURL).not.toHaveBeenCalled();
   });
 
+  async function startGeoParquetInstall(strictMode = false) {
+    const getExportMetadata = vi.fn().mockResolvedValue(geometryMetadata);
+    downloadAs.mockResolvedValueOnce({
+      url: "",
+      filename: "",
+      error: "GeoParquet export requires pyarrow.",
+      missing_packages: ["pyarrow"],
+    });
+    const { rerenderExportActions, unmount } = renderExportActions(
+      { getExportMetadata, metadataSource: "first" },
+      null,
+      "edit",
+      strictMode,
+    );
+    const dialog = await openDialog();
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Download GeoParquet" }),
+    );
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Install pyarrow" }),
+    );
+    return { dialog, getExportMetadata, rerenderExportActions, unmount };
+  }
+
+  it("does not retry with a geometry choice after the final geometry disappears", async () => {
+    const { getExportMetadata } = await startGeoParquetInstall();
+    getExportMetadata.mockResolvedValue({
+      geometry_columns: [],
+      primary_geometry_column: null,
+      default_geometry_column: null,
+      formats: {},
+    });
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+    expect(downloadByURL).not.toHaveBeenCalled();
+    expect(
+      await screen.findByText(
+        "The selected geometry is no longer available. Choose another geometry to export.",
+      ),
+    ).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Download Parquet" }));
+    await waitFor(() => expect(downloadByURL).toHaveBeenCalledTimes(1));
+    expect(downloadAs).toHaveBeenLastCalledWith({ format: "parquet" });
+  });
+
+  it("does not export when installation finishes after the widget unmounts", async () => {
+    const { getExportMetadata, unmount } = await startGeoParquetInstall();
+    unmount();
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    expect(getExportMetadata).toHaveBeenCalledTimes(1);
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+    expect(downloadByURL).not.toHaveBeenCalled();
+  });
+
+  it("does not export when post-install metadata resolves after unmount", async () => {
+    const { getExportMetadata, unmount } = await startGeoParquetInstall();
+    let resolveCheck: (value: ExportMetadata) => void = () => undefined;
+    getExportMetadata.mockImplementationOnce(
+      () =>
+        new Promise<ExportMetadata>((resolve) => {
+          resolveCheck = resolve;
+        }),
+    );
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+    expect(getExportMetadata).toHaveBeenCalledTimes(2);
+    unmount();
+
+    await act(async () => resolveCheck(geometryMetadata));
+
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+    expect(downloadByURL).not.toHaveBeenCalled();
+  });
+
+  it("does not deliver a retried export that resolves after unmount", async () => {
+    const { unmount } = await startGeoParquetInstall();
+    let resolveDownload: (value: {
+      url: string;
+      filename: string;
+    }) => void = () => undefined;
+    downloadAs.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          resolveDownload = resolve;
+        }),
+    );
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+    expect(downloadAs).toHaveBeenCalledTimes(2);
+    unmount();
+
+    await act(async () =>
+      resolveDownload({
+        url: "https://example.test/export",
+        filename: "table",
+      }),
+    );
+
+    expect(downloadByURL).not.toHaveBeenCalled();
+  });
+
+  it("retries after installation under StrictMode effect replay", async () => {
+    await startGeoParquetInstall(true);
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    await waitFor(() => expect(downloadByURL).toHaveBeenCalledTimes(1));
+    expect(downloadAs).toHaveBeenLastCalledWith({
+      format: "parquet",
+      geometry_column: "location",
+    });
+  });
+
+  it("does not export when installation finishes after the dialog closes", async () => {
+    const { dialog, getExportMetadata } = await startGeoParquetInstall();
+    fireEvent.click(within(dialog).getByRole("button", { name: "Close" }));
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    expect(getExportMetadata).toHaveBeenCalledTimes(1);
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+    expect(downloadByURL).not.toHaveBeenCalled();
+  });
+
+  it("does not export when installation finishes after the source changes", async () => {
+    const { getExportMetadata, rerenderExportActions } =
+      await startGeoParquetInstall();
+    rerenderExportActions({ getExportMetadata, metadataSource: "second" });
+    await waitFor(() => {
+      expect(getExportMetadata).toHaveBeenCalledTimes(2);
+    });
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    expect(getExportMetadata).toHaveBeenCalledTimes(2);
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+    expect(downloadByURL).not.toHaveBeenCalled();
+  });
+
+  it("does not export a non-geographic retry after the dialog closes", async () => {
+    downloadAs.mockResolvedValueOnce({
+      url: "",
+      filename: "",
+      error: "Parquet export requires pyarrow.",
+      missing_packages: ["pyarrow"],
+    });
+    renderExportActions();
+    const dialog = await openDialog();
+    fireEvent.click(screen.getByRole("button", { name: "Download Parquet" }));
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Install pyarrow" }),
+    );
+    fireEvent.click(within(dialog).getByRole("button", { name: "Close" }));
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+    expect(downloadByURL).not.toHaveBeenCalled();
+  });
+
+  it("retries after installation when an earlier export succeeded", async () => {
+    const getExportMetadata = vi.fn().mockResolvedValue({
+      ...geometryMetadata,
+      formats: {
+        parquet: {
+          available: false,
+          reason: "GeoParquet export requires pyarrow.",
+          missing_packages: ["pyarrow"],
+        },
+      },
+    });
+    renderExportActions({ getExportMetadata });
+    await openDialog();
+    fireEvent.click(screen.getByRole("button", { name: "Download CSV" }));
+    await waitFor(() => expect(downloadByURL).toHaveBeenCalledTimes(1));
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Install pyarrow" }),
+    );
+    getExportMetadata.mockResolvedValue(geometryMetadata);
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+
+    await waitFor(() => expect(downloadByURL).toHaveBeenCalledTimes(2));
+    expect(downloadAs).toHaveBeenLastCalledWith({
+      format: "parquet",
+      geometry_column: "location",
+    });
+  });
+
+  it("waits for the post-install metadata check before exporting", async () => {
+    let resolveCheck: (value: ExportMetadata) => void = () => undefined;
+    const getExportMetadata = vi.fn().mockResolvedValue({
+      ...geometryMetadata,
+      formats: {
+        parquet: {
+          available: false,
+          reason: "GeoParquet export requires pyarrow.",
+          missing_packages: ["pyarrow"],
+        },
+      },
+    });
+    renderExportActions({ getExportMetadata });
+    await openDialog();
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Install pyarrow" }),
+    );
+    getExportMetadata.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          resolveCheck = resolve;
+        }),
+    );
+
+    await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
+    expect(downloadAs).not.toHaveBeenCalled();
+
+    getExportMetadata.mockResolvedValue(geometryMetadata);
+    await act(async () => resolveCheck(geometryMetadata));
+    await waitFor(() => expect(downloadByURL).toHaveBeenCalled());
+    expect(downloadAs).toHaveBeenCalledTimes(1);
+  });
+
+  it("uses the new source eligibility after a settled package failure", async () => {
+    const getExportMetadata = vi.fn().mockResolvedValue(geometryMetadata);
+    downloadAs.mockResolvedValueOnce({
+      url: "",
+      filename: "",
+      error: "GeoParquet export requires pyarrow.",
+      missing_packages: ["pyarrow"],
+    });
+    const { rerenderExportActions } = renderExportActions({
+      getExportMetadata,
+      metadataSource: "first",
+    });
+    await openDialog();
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Download GeoParquet" }),
+    );
+    await screen.findByRole("button", { name: "Install pyarrow" });
+
+    rerenderExportActions({ getExportMetadata, metadataSource: "second" });
+
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "Download GeoParquet" }),
+      ).toBeEnabled(),
+    );
+    expect(
+      screen.queryByRole("button", { name: "Install pyarrow" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("ignores metadata for an earlier source that resolves late", async () => {
+    let resolveFirst: (value: ExportMetadata) => void = () => undefined;
+    const first = vi.fn(
+      () =>
+        new Promise<ExportMetadata>((resolve) => {
+          resolveFirst = resolve;
+        }),
+    );
+    const second = vi.fn().mockResolvedValue({
+      ...geometryMetadata,
+      geometry_columns: [
+        { name: "region", encoding: "objects", crs: "EPSG:3857" },
+      ],
+      primary_geometry_column: "region",
+      default_geometry_column: "region",
+    });
+    const { rerenderExportActions } = renderExportActions({
+      getExportMetadata: first,
+      metadataSource: "first",
+    });
+    await openDialog();
+    rerenderExportActions({
+      getExportMetadata: second,
+      metadataSource: "second",
+    });
+    await waitFor(() =>
+      expect(screen.getByTestId("export-summary-parquet")).toHaveTextContent(
+        "region",
+      ),
+    );
+
+    await act(async () => resolveFirst(geometryMetadata));
+
+    expect(screen.getByTestId("export-summary-parquet")).toHaveTextContent(
+      "region",
+    );
+  });
+
+  it("does not use earlier metadata when the new source request fails", async () => {
+    const getExportMetadata = vi.fn().mockResolvedValue(geometryMetadata);
+    const { rerenderExportActions } = renderExportActions({
+      getExportMetadata,
+      metadataSource: "first",
+    });
+    await openDialog();
+    await waitFor(() =>
+      expect(
+        screen.getByRole("button", { name: "Download GeoParquet" }),
+      ).toBeEnabled(),
+    );
+    getExportMetadata.mockRejectedValueOnce(new Error("Connection lost"));
+
+    rerenderExportActions({ getExportMetadata, metadataSource: "second" });
+
+    expect(
+      await screen.findByText(
+        "Could not load geometry options: Connection lost",
+      ),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Download Parquet" }),
+    ).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Download CSV" })).toBeEnabled();
+  });
+
   it("shows formats in the approved order with an options toggle where supported", async () => {
     renderExportActions();
     const dialog = await openDialog();
@@ -1412,7 +1735,7 @@ describe("ExportActions GeoJSON", () => {
     );
     await act(async () => mocks.handleInstallPackages.mock.calls[0][1]());
     await waitFor(() => expect(downloadByURL).toHaveBeenCalled());
-    expect(getExportMetadata).toHaveBeenCalledTimes(2);
+    expect(getExportMetadata).toHaveBeenCalledTimes(3);
     expect(downloadAs).toHaveBeenLastCalledWith({
       format: "geojson",
       geometry_column: "boundary",
@@ -1685,7 +2008,7 @@ describe("ExportActions GeoJSON clipboard", () => {
       format: "geojson",
       geometry_column: "boundary",
     });
-    expect(getExportMetadata).toHaveBeenCalledTimes(2);
+    expect(getExportMetadata).toHaveBeenCalledTimes(3);
     expect(downloadByURL).not.toHaveBeenCalled();
   });
 

package/src/components/data-table/context-menu.tsx

@@ -1,12 +1,19 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { DataType } from "@/core/kernel/messages";
+import { assertNever } from "@/utils/assertNever";
+import { copyToClipboard } from "@/utils/copy";
+import {
+  parseLocalISODate,
+  parseLocalISODateTime,
+  parseTimeToDate,
+} from "@/utils/dates";
+import { Logger } from "@/utils/Logger";
 import type { Cell } from "@tanstack/react-table";
 import { useAtomValue } from "jotai";
 import { CopyIcon, FilterIcon, SquareStack } from "lucide-react";
 import type { RefObject } from "react";
 import useEvent from "react-use-event-hook";
-import { copyToClipboard } from "@/utils/copy";
-import { Logger } from "@/utils/Logger";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -16,13 +23,94 @@ import {
   ContextMenuTrigger,
 } from "../ui/context-menu";
 import { DATA_CELL_ID } from "./cell-utils";
-import {
-  Filter,
-  isMembershipFilterType,
-  type MembershipFilterType,
-} from "./filters";
+import { type FilterType, Filter } from "./filters";
 import { selectedCellsAtom } from "./range-focus/atoms";
-import { getClipboardContent, getRawValue } from "./utils";
+import { getClipboardContent, getRawValue, isNullishSentinel } from "./utils";
+
+type Comparison = "eq" | "neq";
+
+const symbolOp = {
+  eq: "==",
+  neq: "!=",
+} as const;
+
+const textOp = {
+  eq: "equals",
+  neq: "does_not_equal",
+} as const;
+
+export function buildCellFilter({
+  type,
+  value,
+  comparison = "eq",
+  dataType,
+  dtype,
+}: {
+  type: FilterType;
+  value: unknown;
+  comparison?: Comparison;
+  dataType?: DataType;
+  dtype?: string;
+}) {
+  if (isNullishSentinel(value, dataType, dtype)) {
+    return { type, operator: comparison === "eq" ? "is_null" : "is_not_null" };
+  }
+
+  switch (type) {
+    case "number":
+      if (typeof value !== "number") {
+        return undefined;
+      }
+
+      return Filter.number({
+        operator: symbolOp[comparison],
+        value,
+      });
+    case "text":
+      return Filter.text({
+        operator: textOp[comparison],
+        text: value as string,
+      });
+    case "date": {
+      const date = parseLocalISODate(value as string);
+      if (!date) {
+        return undefined;
+      }
+      return Filter.date({
+        operator: symbolOp[comparison],
+        value: date,
+      });
+    }
+    case "datetime": {
+      const date = parseLocalISODateTime(value as string);
+      if (!date) {
+        return undefined;
+      }
+      return Filter.datetime({
+        operator: symbolOp[comparison],
+        value: date,
+      });
+    }
+    case "time": {
+      const time = parseTimeToDate(value as string);
+      if (!time) {
+        return undefined;
+      }
+      return Filter.time({
+        operator: symbolOp[comparison],
+        value: time,
+      });
+    }
+    case "boolean": {
+      const target = comparison === "eq" ? value : !(value as boolean);
+      return Filter.boolean({
+        operator: target ? "is_true" : "is_false",
+      });
+    }
+    default:
+      assertNever(type);
+  }
+}
 
 export const DataTableContextMenu = <TData,>({
   contextMenuRef,
@@ -102,19 +190,34 @@ export const CellContextMenu = <TData,>({
 
   const column = cell.column;
   const filterType = column.columnDef.meta?.filterType;
-  const membershipFilterType: MembershipFilterType | undefined =
-    column.getCanFilter() && filterType && isMembershipFilterType(filterType)
-      ? filterType
+  const dataType = column.columnDef.meta?.dataType;
+  const dtype = column.columnDef.meta?.dtype;
+
+  const canFilter = Boolean(filterType && column.getCanFilter());
+  const buildFilter = (comparison: Comparison) =>
+    canFilter
+      ? buildCellFilter({
+          type: filterType as FilterType,
+          value: rawValue,
+          comparison,
+          dataType,
+          dtype,
+        })
       : undefined;
+  const eqFilter = buildFilter("eq");
+  const canFilterByValue = eqFilter !== undefined;
+
+  const handleFilterCellByValue = (comparison: Comparison) => {
+    if (!filterType) {
+      return;
+    }
+
+    const filter = comparison === "eq" ? eqFilter : buildFilter("neq");
+
+    if (!filter) {
+      return;
+    }
 
-  const handleFilterCell = (
-    type: MembershipFilterType,
-    operator: "in" | "not_in",
-  ) => {
-    const filter =
-      type === "number"
-        ? Filter.number({ operator, values: [rawValue] })
-        : Filter.text({ operator, values: [rawValue] });
     column.setFilterValue(filter);
   };
 
@@ -130,18 +233,14 @@ export const CellContextMenu = <TData,>({
           Copy selected cells
         </ContextMenuItem>
       )}
-      {membershipFilterType && (
+      {canFilterByValue && (
         <>
           <ContextMenuSeparator />
-          <ContextMenuItem
-            onClick={() => handleFilterCell(membershipFilterType, "in")}
-          >
+          <ContextMenuItem onClick={() => handleFilterCellByValue("eq")}>
             <FilterIcon className="mo-dropdown-icon h-3 w-3" />
             Filter by this value
           </ContextMenuItem>
-          <ContextMenuItem
-            onClick={() => handleFilterCell(membershipFilterType, "not_in")}
-          >
+          <ContextMenuItem onClick={() => handleFilterCellByValue("neq")}>
             <FilterIcon className="mo-dropdown-icon h-3 w-3" />
             Remove rows with this value
           </ContextMenuItem>

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

@@ -14,6 +14,9 @@ import {
   dateToLocalISODate,
   dateToLocalISODateTime,
   dateToLocalISOTime,
+  parseLocalISODate,
+  parseLocalISODateTime,
+  parseTimeToDate,
 } from "@/utils/dates";
 import type { FilterType } from "./filters";
 
@@ -72,53 +75,23 @@ export function parsePastedDate(
     return undefined;
   }
 
-  const timeMatch =
-    filterType === "time"
-      ? trimmed.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(am|pm)?$/i)
-      : null;
-  if (timeMatch) {
-    const [, hStr, mStr, sStr, ampm] = timeMatch;
-    let hour = Number.parseInt(hStr, 10);
-    const minute = Number.parseInt(mStr, 10);
-    const second = sStr ? Number.parseInt(sStr, 10) : 0;
-    if (ampm) {
-      const isPm = ampm.toLowerCase() === "pm";
-      if (hour === 12) {
-        hour = isPm ? 12 : 0;
-      } else if (isPm) {
-        hour += 12;
-      }
+  if (filterType === "time") {
+    const date = parseTimeToDate(trimmed);
+    if (date) {
+      return date;
     }
-    return new Date(1970, 0, 1, hour, minute, second);
   }
 
-  const dateOnlyMatch = trimmed.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-  if (dateOnlyMatch) {
-    const [, y, m, d] = dateOnlyMatch;
-    return new Date(
-      Number.parseInt(y, 10),
-      Number.parseInt(m, 10) - 1,
-      Number.parseInt(d, 10),
-    );
+  if (filterType === "date") {
+    const date = parseLocalISODate(trimmed);
+    if (date) {
+      return date;
+    }
   }
 
-  // Parse ISO datetimes as wall-clock to stay consistent with the picker's
-  // local-time basis. Trailing `Z` or offsets are stripped so that pasting
-  // `2024-01-15T08:30:00Z` displays `08:30` instead of being shifted by the
-  // viewer's timezone.
-  const isoMatch = trimmed.match(
-    /^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?$/,
-  );
-  if (isoMatch) {
-    const [, y, mo, d, h, mi, s] = isoMatch;
-    return new Date(
-      Number.parseInt(y, 10),
-      Number.parseInt(mo, 10) - 1,
-      Number.parseInt(d, 10),
-      Number.parseInt(h, 10),
-      Number.parseInt(mi, 10),
-      s ? Number.parseInt(s, 10) : 0,
-    );
+  const isoDateTime = parseLocalISODateTime(trimmed);
+  if (isoDateTime) {
+    return isoDateTime;
   }
 
   const parsed = new Date(trimmed);