@marimo-team/islands 0.25.2-dev7 → 0.25.2-dev89

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

@@ -1,7 +1,91 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { expect, test } from "vitest";
-import { matchingPageRanges } from "../pagination";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { DataTablePagination, matchingPageRanges } from "../pagination";
+
+function PaginationHarness({
+  totalPages = 3,
+  loading = false,
+}: {
+  totalPages?: number;
+  loading?: boolean;
+}) {
+  const table = useReactTable({
+    locale: "en-US",
+    data: [],
+    columns: [],
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: totalPages,
+  });
+  return (
+    <TooltipProvider>
+      <DataTablePagination table={table} tableLoading={loading} />
+    </TooltipProvider>
+  );
+}
+
+test("named navigation controls preserve page updates and boundaries", () => {
+  render(<PaginationHarness />);
+  expect(screen.getByRole("button", { name: "First page" })).toBeDisabled();
+  expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
+  fireEvent.click(screen.getByRole("button", { name: "Next page" }));
+  expect(
+    screen.getByRole("button", { name: "Choose page, current page 2 of 3" }),
+  ).toBeEnabled();
+  fireEvent.click(screen.getByRole("button", { name: "Last page" }));
+  expect(screen.getByRole("button", { name: "Next page" })).toBeDisabled();
+  expect(screen.getByRole("button", { name: "Last page" })).toBeDisabled();
+  fireEvent.click(screen.getByRole("button", { name: "Previous page" }));
+  fireEvent.click(screen.getByRole("button", { name: "First page" }));
+  expect(
+    screen.getByRole("button", { name: "Choose page, current page 1 of 3" }),
+  ).toBeEnabled();
+  expect(screen.getByRole("button", { name: "First page" })).toBeDisabled();
+  expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
+  expect(screen.getByRole("button", { name: "Next page" })).toBeEnabled();
+  expect(screen.getByRole("button", { name: "Last page" })).toBeEnabled();
+});
+
+test("loading prevents navigation and a single page disables controls", () => {
+  const { rerender } = render(<PaginationHarness loading={true} />);
+  fireEvent.click(screen.getByRole("button", { name: "Next page" }));
+  fireEvent.click(screen.getByRole("button", { name: "Last page" }));
+  expect(
+    screen.getByRole("button", { name: "Choose page, current page 1 of 3" }),
+  ).toBeEnabled();
+  rerender(<PaginationHarness />);
+  fireEvent.click(screen.getByRole("button", { name: "Next page" }));
+  expect(
+    screen.getByRole("button", { name: "Choose page, current page 2 of 3" }),
+  ).toBeEnabled();
+  rerender(<PaginationHarness key="single-page" totalPages={1} />);
+  for (const name of [
+    "First page",
+    "Previous page",
+    "Next page",
+    "Last page",
+    "Choose page, current page 1 of 1",
+  ]) {
+    expect(screen.getByRole("button", { name })).toBeDisabled();
+  }
+});
+
+test("page picker exposes named dialog and search", () => {
+  render(<PaginationHarness />);
+  fireEvent.click(
+    screen.getByRole("button", { name: "Choose page, current page 1 of 3" }),
+  );
+  expect(
+    screen.getByRole("dialog", { name: "Choose page" }),
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole("combobox", { name: "Search pages" }),
+  ).toBeInTheDocument();
+});
 
 test("empty prefix returns no ranges", () => {
   expect(matchingPageRanges("", 500)).toEqual([]);

package/src/components/data-table/__tests__/schemas.test.ts

@@ -0,0 +1,57 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import {
+  DownloadAsSchema,
+  DownloadGeoJSONSchema,
+  GetExportMetadataSchema,
+} from "../schemas";
+
+describe("geometry export contracts", () => {
+  it("keeps the existing download_as formats unchanged", () => {
+    for (const format of ["csv", "tsv", "json", "parquet"]) {
+      expect(DownloadAsSchema.input.parse({ format })).toEqual({ format });
+    }
+    expect(
+      DownloadAsSchema.input.safeParse({ format: "geojson" }).success,
+    ).toBe(false);
+  });
+  it.each([undefined, "geom_b", ""])(
+    "accepts a GeoJSON request with geometry %s",
+    (geometry_column) => {
+      const request = { format: "geojson", geometry_column };
+      expect(DownloadGeoJSONSchema.input.parse(request)).toEqual(request);
+    },
+  );
+
+  it("accepts a missing CRS response for an unnamed geometry", () => {
+    const response = {
+      url: "",
+      filename: "",
+      code: "missing_crs",
+      column: "",
+      error: "Declare a CRS.",
+    };
+    expect(DownloadGeoJSONSchema.output.parse(response)).toEqual(response);
+  });
+
+  it("accepts GeoJSON support when the default geometry has no CRS", () => {
+    const metadata = {
+      geometry_columns: [
+        { name: "", encoding: "objects", crs: null },
+        { name: "alternate", encoding: "objects", crs: "EPSG:4326" },
+      ],
+      primary_geometry_column: "",
+      default_geometry_column: "",
+      formats: {
+        geojson: { available: true, reason: null, missing_packages: [] },
+        parquet: {
+          available: false,
+          reason: "GeoParquet export requires pyarrow.",
+          missing_packages: ["pyarrow"],
+        },
+      },
+    };
+    expect(GetExportMetadataSchema.output.parse(metadata)).toEqual(metadata);
+  });
+});

package/src/components/data-table/charts/__tests__/schemas.test.ts

@@ -4,6 +4,31 @@ import { describe, expect, it } from "vitest";
 import { ChartSchema } from "../schemas";
 
 describe("ChartSchema", () => {
+  it.each(["hours", "yearmonthdatehours"] as const)(
+    "preserves the %s time unit in saved chart configurations",
+    (timeUnit) => {
+      const column = {
+        field: "timestamp",
+        selectedDataType: "temporal",
+        sort: "ascending",
+        timeUnit,
+      };
+      const config = {
+        general: {
+          xColumn: { ...column, aggregate: "none" },
+          yColumn: { ...column, aggregate: "none" },
+          facet: {
+            row: { ...column, linkYAxis: true, binned: true, maxbins: 6 },
+            column: { ...column, linkXAxis: true, binned: true, maxbins: 6 },
+          },
+        },
+        tooltips: { auto: true, fields: [] },
+      };
+
+      expect(ChartSchema.parse(config)).toEqual(config);
+    },
+  );
+
   it("keeps a known axis column type", () => {
     const result = ChartSchema.parse({
       general: { xColumn: { field: "count", type: "integer" } },

package/src/components/data-table/charts/__tests__/spec.test.ts

@@ -69,30 +69,33 @@ describe("getAxisEncoding", () => {
     });
   });
 
-  it("should return correct encoding for temporal field with timeUnit", () => {
-    const result = getAxisEncoding(
-      {
-        field: "date",
-        selectedDataType: "temporal",
-        aggregate: NONE_VALUE,
-        timeUnit: "yearmonth",
-      },
-      undefined,
-      "Date",
-      undefined,
-      ChartType.LINE,
-    );
+  it.each(["yearmonth", "hours", "yearmonthdatehours"] as const)(
+    "should preserve the %s time unit in temporal axis encodings",
+    (timeUnit) => {
+      const result = getAxisEncoding(
+        {
+          field: "date",
+          selectedDataType: "temporal",
+          aggregate: NONE_VALUE,
+          timeUnit,
+        },
+        undefined,
+        "Date",
+        undefined,
+        ChartType.LINE,
+      );
 
-    expect(result).toEqual({
-      field: "date",
-      type: "temporal",
-      bin: undefined,
-      title: "Date",
-      stack: undefined,
-      aggregate: undefined,
-      timeUnit: "yearmonth",
-    });
-  });
+      expect(result).toEqual({
+        field: "date",
+        type: "temporal",
+        bin: undefined,
+        title: "Date",
+        stack: undefined,
+        aggregate: undefined,
+        timeUnit,
+      });
+    },
+  );
 
   it("should return correct encoding for categorical field", () => {
     const result = getAxisEncoding(

package/src/components/data-table/charts/constants.ts

@@ -147,17 +147,18 @@ export const TIME_UNIT_DESCRIPTIONS: Record<
   [title: string, description: string]
 > = {
   year: ["Year", "2025"],
-  quarter: ["Quarter", "Q1 2025"],
-  month: ["Month", "Jan 2025"],
-  week: ["Week", "Jan 01, 2025"],
-  day: ["Day", "Jan 01, 2025"],
-  hours: ["Hour", "Jan 01, 2025 12:00"],
-  minutes: ["Minute", "Jan 01, 2025 12:34"],
-  seconds: ["Second", "Jan 01, 2025 12:34:56"],
-  milliseconds: ["Millisecond", "Jan 01, 2025 12:34:56.789"],
-  date: ["Date", "Jan 01, 2025"],
-  dayofyear: ["Day of Year", "Day 1 of 2025"],
+  quarter: ["Quarter of year", "Q1"],
+  month: ["Month of year", "Jan"],
+  week: ["Week of year", "Week 1"],
+  day: ["Day of week", "Sunday"],
+  hours: ["Hour of day", "12:00"],
+  minutes: ["Minute of hour", "34"],
+  seconds: ["Second of minute", "56"],
+  milliseconds: ["Millisecond of second", "789"],
+  date: ["Day of month", "1"],
+  dayofyear: ["Day of year", "Day 1"],
   yearmonth: ["Year Month", "Jan 2025"],
   yearmonthdate: ["Year Month Date", "Jan 01, 2025"],
+  yearmonthdatehours: ["Year Month Date Hours", "Jan 01, 2025 12:00"],
   monthdate: ["Month Date", "Jan 01"],
 };

package/src/components/data-table/charts/types.ts

@@ -40,6 +40,7 @@ export const SINGLE_TIME_UNITS = [
 export const COMBINED_TIME_UNITS = [
   "yearmonth",
   "yearmonthdate",
+  "yearmonthdatehours",
   "monthdate",
 ] as const;
 export const TIME_UNITS = [

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

@@ -155,6 +155,7 @@ const DataTableInternal = <TData,>({
   paginationState,
   setPaginationState,
   downloadAs,
+  getExportMetadata,
   manualPagination = false,
   pagination = false,
   onRowSelectionChange,
@@ -376,6 +377,8 @@ const DataTableInternal = <TData,>({
                 togglePanel={togglePanel}
                 isAnyPanelOpen={isAnyPanelOpen}
                 downloadAs={downloadAs}
+                getExportMetadata={getExportMetadata}
+                metadataSource={data}
                 sizeBytes={sizeBytes}
                 sizeBytesIsLoading={sizeBytesIsLoading}
               />