@marimo-team/islands 0.25.2-dev14 → 0.25.2-dev140

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__/slider-field.test.tsx

@@ -0,0 +1,54 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useForm, useWatch } from "react-hook-form";
+import { describe, expect, test } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { Form } from "@/components/ui/form";
+import { SliderField } from "../components/form-fields";
+
+SetupMocks.resizeObserver();
+function Harness({ label = "Opacity" }: { label?: string }) {
+  const form = useForm({ defaultValues: { xAxis: { width: 400 } } });
+  const value = useWatch({ control: form.control, name: "xAxis.width" });
+  return (
+    <Form {...form}>
+      <SliderField
+        fieldName="xAxis.width"
+        label={label}
+        defaultValue={400}
+        start={200}
+        stop={800}
+        step={10}
+      />
+      <output aria-label="Current opacity">{value}</output>
+    </Form>
+  );
+}
+
+describe("SliderField", () => {
+  test("names the chart-form thumb and preserves keyboard value updates", () => {
+    const { rerender } = render(<Harness />);
+    fireEvent.keyDown(screen.getByRole("slider", { name: "Opacity" }), {
+      key: "ArrowRight",
+    });
+    expect(screen.getByLabelText("Current opacity")).toHaveTextContent("410");
+    rerender(<Harness label="Updated opacity" />);
+    expect(
+      screen.getByRole("slider", { name: "Updated opacity" }),
+    ).toHaveAttribute("aria-valuenow", "410");
+  });
+
+  test("independently associates repeated chart form instances", () => {
+    render(
+      <>
+        <Harness />
+        <Harness />
+      </>,
+    );
+    const thumbs = screen.getAllByRole("slider", { name: "Opacity" });
+    expect(thumbs).toHaveLength(2);
+    expect(thumbs[0].getAttribute("aria-labelledby")).not.toBe(
+      thumbs[1].getAttribute("aria-labelledby"),
+    );
+  });
+});

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/components/form-fields.tsx

@@ -358,6 +358,7 @@ export const SliderField = ({
   className,
 }: SliderFieldProps) => {
   const form = useFormContext();
+  const labelId = React.useId();
 
   return (
     <FormField
@@ -378,10 +379,11 @@ export const SliderField = ({
           <FormItem
             className={cn("flex flex-row items-center gap-2 w-1/2", className)}
           >
-            <FormLabel>{label}</FormLabel>
+            <FormLabel id={labelId}>{label}</FormLabel>
             <FormControl>
               <Slider
                 {...field}
+                aria-labelledby={labelId}
                 id={fieldName}
                 className="relative flex items-center select-none"
                 value={[numericValue]}

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/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>
     );
   }
 

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}
               />