@marimo-team/frontend 0.25.2-dev99 → 0.25.3-dev10

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/column-formatting/feature.ts

@@ -97,6 +97,7 @@ export const getFormatters = memoizeLastValue((locale: string) => {
 
   const dateFormatter = new Intl.DateTimeFormat(locale, {
     dateStyle: "short", // 3/4/2024
+    timeZone: "UTC",
   });
 
   const dateTimeFormatter = new Intl.DateTimeFormat(locale, {
@@ -123,6 +124,24 @@ export const getFormatters = memoizeLastValue((locale: string) => {
   };
 });
 
+const TIMEZONE_SUFFIX = /(?:Z|[+-]\d{2}:?\d{2})$/i;
+
+/**
+ * The date formatters render in UTC. A naive datetime string carries no
+ * offset, and `new Date` would read it as local time, so pin it to UTC
+ * to keep the wall-clock fields the backend sent.
+ */
+function parseDateAsUTC(value: unknown): Date {
+  if (typeof value !== "string") {
+    return new Date(value as number | Date);
+  }
+  const trimmed = value.trim();
+  if (TIMEZONE_SUFFIX.test(trimmed) || !trimmed.includes(":")) {
+    return new Date(trimmed);
+  }
+  return new Date(`${trimmed.replace(" ", "T")}Z`);
+}
+
 // Apply formatting to a value given a format and data type
 export const applyFormat = (
   value: unknown,
@@ -152,7 +171,7 @@ export const applyFormat = (
       return value;
     case "datetime":
     case "date": {
-      const date = new Date(value as string);
+      const date = parseDateAsUTC(value);
       switch (format) {
         case "Date":
           return dateFormatter.format(date);

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

@@ -6,14 +6,14 @@ import { Popover as PopoverPrimitive } from "radix-ui";
 const PopoverClose = PopoverPrimitive.Close;
 
 import type { Column, ColumnDef } from "@tanstack/react-table";
-import { formatDate, isValid } from "date-fns";
+import { isValid } from "date-fns";
 import { useRef } from "react";
 import { useLocale, useNumberFormatter } from "react-aria";
 import { WithLocale } from "@/core/i18n/with-locale";
 import type { DataType } from "@/core/kernel/messages";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
-import { type DateFormat, exactDateTime, getDateFormat } from "@/utils/dates";
+import { exactDateTime } from "@/utils/dates";
 import { Events } from "@/utils/events";
 import { Logger } from "@/utils/Logger";
 import { Maps } from "@/utils/maps";
@@ -583,21 +583,19 @@ function renderDate({
   value,
   dataType,
   dtype,
-  format,
+  displayValue,
   locale,
 }: {
   value: Date;
   dataType?: DataType;
   dtype?: string;
-  format?: DateFormat | null;
+  displayValue?: string;
   locale: string;
 }): React.ReactNode {
   const type = dataType === "date" ? "date" : "datetime";
   const timezone = extractTimezone(dtype);
 
-  const exactValue = format
-    ? formatDate(value, format)
-    : exactDateTime(value, timezone, locale);
+  const exactValue = displayValue ?? exactDateTime(value, timezone, locale);
 
   return (
     <DatePopover date={value} type={type}>
@@ -640,7 +638,8 @@ export function renderCellValue<TData, TValue>({
 
   if (dataType === "datetime" && typeof value === "string") {
     try {
-      if (!isValid(value)) {
+      const date = new Date(value);
+      if (!format || !isValid(date)) {
         return (
           <div onClick={selectCell} className={cellStyles}>
             {value}
@@ -648,14 +647,15 @@ export function renderCellValue<TData, TValue>({
         );
       }
 
-      const date = new Date(value);
-      const format = getDateFormat(value);
+      const displayValue = String(column.applyColumnFormatting(value));
       return (
-        <WithLocale>
-          {(locale) =>
-            renderDate({ value: date, dataType, dtype, format, locale })
-          }
-        </WithLocale>
+        <div onClick={selectCell} className={cellStyles}>
+          <WithLocale>
+            {(locale) =>
+              renderDate({ value: date, dataType, dtype, displayValue, locale })
+            }
+          </WithLocale>
+        </div>
       );
     } catch (error) {
       Logger.error("Error parsing datetime, fallback to string", error);
@@ -672,10 +672,17 @@ export function renderCellValue<TData, TValue>({
     }
 
     // e.g. 2010-10-07 17:15:00
+    const displayValue = format
+      ? String(column.applyColumnFormatting(value))
+      : undefined;
     return (
-      <WithLocale>
-        {(locale) => renderDate({ value, dataType, dtype, locale })}
-      </WithLocale>
+      <div onClick={selectCell} className={cellStyles}>
+        <WithLocale>
+          {(locale) =>
+            renderDate({ value, dataType, dtype, displayValue, locale })
+          }
+        </WithLocale>
+      </div>
     );
   }