@marimo-team/islands 0.25.3-dev21 → 0.25.3-dev211

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

@@ -17,6 +17,7 @@ import type { DataTableSelection } from "./types";
 
 interface TableBottomBarProps<TData> {
   pagination: boolean;
+  hasNextPage?: boolean;
   totalColumns: number;
   selection?: DataTableSelection;
   onRowSelectionChange?: (value: RowSelectionState) => void;
@@ -30,6 +31,7 @@ interface TableBottomBarProps<TData> {
 
 export const TableBottomBar = <TData,>({
   pagination,
+  hasNextPage,
   totalColumns,
   selection,
   onRowSelectionChange,
@@ -147,7 +149,7 @@ export const TableBottomBar = <TData,>({
     const { totalColumns: effectiveTotalColumns, hiddenColumns } =
       getColumnCountForDisplay(table, totalColumns);
     const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
-      numRows: table.getRowCount(),
+      numRows: hasNextPage === undefined ? table.getRowCount() : "too_many",
       totalColumns: effectiveTotalColumns,
       hiddenColumns,
       locale,
@@ -178,6 +180,7 @@ export const TableBottomBar = <TData,>({
           <DataTablePagination
             table={table}
             tableLoading={tableLoading}
+            hasNextPage={hasNextPage}
             showPageSizeSelector={showPageSizeSelector}
           />
         )}

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

@@ -76,6 +76,7 @@ export const TableTopBar = <TData,>({
           <input
             ref={inputRef}
             type="text"
+            aria-label="Search table"
             className="h-6 border-none bg-transparent focus:outline-hidden text-sm w-full min-w-0"
             value={internalValue}
             onKeyDown={(e) => {
@@ -90,6 +91,7 @@ export const TableTopBar = <TData,>({
           {reloading && <Spinner size="small" />}
           {internalValue && (
             <Button
+              aria-label="Clear table search"
               variant="text"
               size="xs"
               className="h-5 w-5 p-0 shrink-0"

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

@@ -60,14 +60,14 @@ describe("ColumnChartSpecModel", () => {
   };
 
   it("should create an instance", () => {
-    const model = new ColumnChartSpecModel(
-      [],
-      mockFieldTypes,
-      mockStats,
-      mockBinValues,
-      mockValueCounts,
-      { includeCharts: true },
-    );
+    const model = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: mockFieldTypes,
+      stats: mockStats,
+      binValues: mockBinValues,
+      valueCounts: mockValueCounts,
+      opts: { includeCharts: true },
+    });
     expect(model).toBeInstanceOf(ColumnChartSpecModel);
   });
 
@@ -77,14 +77,14 @@ describe("ColumnChartSpecModel", () => {
   });
 
   it("should return header summary with spec when includeCharts is true", () => {
-    const model = new ColumnChartSpecModel(
-      [],
-      mockFieldTypes,
-      mockStats,
-      mockBinValues,
-      mockValueCounts,
-      { includeCharts: true },
-    );
+    const model = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: mockFieldTypes,
+      stats: mockStats,
+      binValues: mockBinValues,
+      valueCounts: mockValueCounts,
+      opts: { includeCharts: true },
+    });
     const dateSummary = model.getHeaderSummary("date");
     expect(dateSummary.stats).toEqual(mockStats.date);
     expect(dateSummary.type).toBe("date");
@@ -92,14 +92,14 @@ describe("ColumnChartSpecModel", () => {
   });
 
   it("should return header summary without spec when includeCharts is false", () => {
-    const model = new ColumnChartSpecModel(
-      [],
-      mockFieldTypes,
-      mockStats,
-      mockBinValues,
-      mockValueCounts,
-      { includeCharts: false },
-    );
+    const model = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: mockFieldTypes,
+      stats: mockStats,
+      binValues: mockBinValues,
+      valueCounts: mockValueCounts,
+      opts: { includeCharts: false },
+    });
     const numberSummary = model.getHeaderSummary("number");
     expect(numberSummary.stats).toEqual(mockStats.number);
     expect(numberSummary.type).toBe("number");
@@ -107,14 +107,14 @@ describe("ColumnChartSpecModel", () => {
   });
 
   it("should return null spec for unknown types", () => {
-    const model = new ColumnChartSpecModel(
-      [],
-      mockFieldTypes,
-      mockStats,
-      mockBinValues,
-      mockValueCounts,
-      { includeCharts: true },
-    );
+    const model = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: mockFieldTypes,
+      stats: mockStats,
+      binValues: mockBinValues,
+      valueCounts: mockValueCounts,
+      opts: { includeCharts: true },
+    });
     const unknownSummary = model.getHeaderSummary("unknown");
     expect(unknownSummary.spec).toBeNull();
   });
@@ -133,14 +133,14 @@ describe("ColumnChartSpecModel", () => {
         { bin_start: "2023-06-01", bin_end: "2023-12-31", count: 20 },
       ],
     };
-    const model = new ColumnChartSpecModel(
-      [],
-      specialFieldTypes,
-      specialStats,
-      specialBinValues,
-      mockValueCounts,
-      { includeCharts: true },
-    );
+    const model = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: specialFieldTypes,
+      stats: specialStats,
+      binValues: specialBinValues,
+      valueCounts: mockValueCounts,
+      opts: { includeCharts: true },
+    });
     const summary = model.getHeaderSummary("column.with[special:chars]");
     expect(summary.spec).toBeDefined();
     expect(
@@ -150,14 +150,14 @@ describe("ColumnChartSpecModel", () => {
   });
 
   it("should expect bin values to be used for number and integer columns", () => {
-    const model = new ColumnChartSpecModel(
-      [],
-      mockFieldTypes,
-      mockStats,
-      mockBinValues,
-      mockValueCounts,
-      { includeCharts: true },
-    );
+    const model = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: mockFieldTypes,
+      stats: mockStats,
+      binValues: mockBinValues,
+      valueCounts: mockValueCounts,
+      opts: { includeCharts: true },
+    });
     const summary = model.getHeaderSummary("number");
     expect(summary.spec).toBeDefined();
     // @ts-expect-error data.values should be available
@@ -185,14 +185,14 @@ describe("ColumnChartSpecModel", () => {
     const allNullBins: Record<ColumnName, BinValues> = {
       number: [],
     };
-    const model = new ColumnChartSpecModel(
-      [],
-      mockFieldTypes,
-      allNullStats,
-      allNullBins,
-      {},
-      { includeCharts: true },
-    );
+    const model = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: mockFieldTypes,
+      stats: allNullStats,
+      binValues: allNullBins,
+      valueCounts: {},
+      opts: { includeCharts: true },
+    });
     const summary = model.getHeaderSummary("number");
     expect(summary.spec).toBeDefined();
     // @ts-expect-error hconcat should be available
@@ -221,14 +221,14 @@ describe("ColumnChartSpecModel", () => {
     const stats: Record<ColumnName, Partial<ColumnHeaderStats>> = {
       number: { nulls: 12, total: 12 },
     };
-    const model = new ColumnChartSpecModel(
-      [],
-      mockFieldTypes,
+    const model = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: mockFieldTypes,
       stats,
-      nanOnlyBins,
-      {},
-      { includeCharts: true },
-    );
+      binValues: nanOnlyBins,
+      valueCounts: {},
+      opts: { includeCharts: true },
+    });
     const first = model.getHeaderSummary("number");
     const second = model.getHeaderSummary("number");
     // All NaN bins are invalid → null-only chart
@@ -241,14 +241,14 @@ describe("ColumnChartSpecModel", () => {
   });
 
   it("should render a null bar for all-null temporal columns", () => {
-    const model = new ColumnChartSpecModel(
-      [],
-      mockFieldTypes,
-      { datetime: { nulls: 12, total: 12 } },
-      { datetime: [] },
-      {},
-      { includeCharts: true },
-    );
+    const model = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: mockFieldTypes,
+      stats: { datetime: { nulls: 12, total: 12 } },
+      binValues: { datetime: [] },
+      valueCounts: {},
+      opts: { includeCharts: true },
+    });
     const summary = model.getHeaderSummary("datetime");
     expect(summary.spec).toBeDefined();
     // @ts-expect-error data.values
@@ -265,26 +265,26 @@ describe("ColumnChartSpecModel", () => {
   });
 
   it("should return null when numeric bins are empty and there are no nulls", () => {
-    const model = new ColumnChartSpecModel(
-      [],
-      mockFieldTypes,
-      { number: { min: 0, max: 1 } },
-      { number: [] },
-      {},
-      { includeCharts: true },
-    );
+    const model = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: mockFieldTypes,
+      stats: { number: { min: 0, max: 1 } },
+      binValues: { number: [] },
+      valueCounts: {},
+      opts: { includeCharts: true },
+    });
     expect(model.getHeaderSummary("number").spec).toBeNull();
   });
 
   it("should handle datetime bin values", () => {
-    const model = new ColumnChartSpecModel(
-      [],
-      mockFieldTypes,
-      mockStats,
-      mockBinValues,
-      mockValueCounts,
-      { includeCharts: true },
-    );
+    const model = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: mockFieldTypes,
+      stats: mockStats,
+      binValues: mockBinValues,
+      valueCounts: mockValueCounts,
+      opts: { includeCharts: true },
+    });
 
     const summary = model.getHeaderSummary("datetime");
     expect(summary.spec).toBeDefined();
@@ -301,14 +301,14 @@ describe("ColumnChartSpecModel", () => {
       ...mockStats,
       datetime: { min: "2023-01-01", max: "2023-12-31" },
     };
-    const model2 = new ColumnChartSpecModel(
-      [],
-      mockFieldTypes,
-      mockStats2,
-      mockBinValues,
-      mockValueCounts,
-      { includeCharts: true },
-    );
+    const model2 = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: mockFieldTypes,
+      stats: mockStats2,
+      binValues: mockBinValues,
+      valueCounts: mockValueCounts,
+      opts: { includeCharts: true },
+    });
     const summary2 = model2.getHeaderSummary("datetime");
     expect(summary2.spec).toBeDefined();
 
@@ -318,14 +318,14 @@ describe("ColumnChartSpecModel", () => {
   });
 
   it("should handle boolean stats", () => {
-    const model = new ColumnChartSpecModel(
-      [],
-      mockFieldTypes,
-      mockStats,
-      mockBinValues,
-      mockValueCounts,
-      { includeCharts: true },
-    );
+    const model = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: mockFieldTypes,
+      stats: mockStats,
+      binValues: mockBinValues,
+      valueCounts: mockValueCounts,
+      opts: { includeCharts: true },
+    });
     const summary = model.getHeaderSummary("boolean");
     expect(summary.spec).toBeDefined();
     // @ts-expect-error data.values should be available
@@ -340,14 +340,14 @@ describe("ColumnChartSpecModel", () => {
   });
 
   it("should handle string value counts", () => {
-    const model = new ColumnChartSpecModel(
-      [],
-      mockFieldTypes,
-      mockStats,
-      mockBinValues,
-      mockValueCounts,
-      { includeCharts: true },
-    );
+    const model = new ColumnChartSpecModel({
+      data: [],
+      fieldTypes: mockFieldTypes,
+      stats: mockStats,
+      binValues: mockBinValues,
+      valueCounts: mockValueCounts,
+      opts: { includeCharts: true },
+    });
     const summary = model.getHeaderSummary("string");
     expect(summary.spec).toBeDefined();
     // @ts-expect-error data.values should be available
@@ -374,64 +374,64 @@ describe("ColumnChartSpecModel", () => {
     ]);
 
     it("url data", () => {
-      const model = new ColumnChartSpecModel(
-        mockData,
+      const model = new ColumnChartSpecModel({
+        data: mockData,
         fieldTypes,
-        mockStats,
-        mockBinValues,
-        mockValueCounts,
-        { includeCharts: true },
-      );
+        stats: mockStats,
+        binValues: mockBinValues,
+        valueCounts: mockValueCounts,
+        opts: { includeCharts: true },
+      });
       expect(model.getHeaderSummary("date").spec).toMatchSnapshot();
     });
 
     it("csv data", () => {
-      const model = new ColumnChartSpecModel(
-        `data:text/csv;base64,${btoa("a,b,c\n1,2,3\n4,5,6")}`,
+      const model = new ColumnChartSpecModel({
+        data: `data:text/csv;base64,${btoa("a,b,c\n1,2,3\n4,5,6")}`,
         fieldTypes,
-        mockStats,
-        mockBinValues,
-        mockValueCounts,
-        { includeCharts: true },
-      );
+        stats: mockStats,
+        binValues: mockBinValues,
+        valueCounts: mockValueCounts,
+        opts: { includeCharts: true },
+      });
       expect(model.getHeaderSummary("a").spec).toMatchSnapshot();
     });
 
     it("csv string", () => {
-      const model = new ColumnChartSpecModel(
-        "a,b,c\n1,2,3\n4,5,6",
+      const model = new ColumnChartSpecModel({
+        data: "a,b,c\n1,2,3\n4,5,6",
         fieldTypes,
-        mockStats,
-        mockBinValues,
-        mockValueCounts,
-        { includeCharts: true },
-      );
+        stats: mockStats,
+        binValues: mockBinValues,
+        valueCounts: mockValueCounts,
+        opts: { includeCharts: true },
+      });
       expect(model.getHeaderSummary("a").spec).toMatchSnapshot();
     });
 
     it("array", () => {
-      const model = new ColumnChartSpecModel(
-        ["a", "b", "c"],
+      const model = new ColumnChartSpecModel({
+        data: ["a", "b", "c"],
         fieldTypes,
-        mockStats,
-        mockBinValues,
-        mockValueCounts,
-        { includeCharts: true },
-      );
+        stats: mockStats,
+        binValues: mockBinValues,
+        valueCounts: mockValueCounts,
+        opts: { includeCharts: true },
+      });
       expect(model.getHeaderSummary("a").spec).toMatchSnapshot();
     });
   });
 
   describe("file URL handling", () => {
     it("should handle marimo file URLs with ./@file prefix", () => {
-      const model = new ColumnChartSpecModel(
-        "./@file/data.csv",
-        mockFieldTypes,
-        mockStats,
-        mockBinValues,
-        mockValueCounts,
-        { includeCharts: true },
-      );
+      const model = new ColumnChartSpecModel({
+        data: "./@file/data.csv",
+        fieldTypes: mockFieldTypes,
+        stats: mockStats,
+        binValues: mockBinValues,
+        valueCounts: mockValueCounts,
+        opts: { includeCharts: true },
+      });
 
       const summary = model.getHeaderSummary("date");
       expect(summary.spec).toBeDefined();
@@ -440,14 +440,14 @@ describe("ColumnChartSpecModel", () => {
     });
 
     it("should handle marimo file URLs with /@file prefix", () => {
-      const model = new ColumnChartSpecModel(
-        "/@file/data.csv",
-        mockFieldTypes,
-        mockStats,
-        mockBinValues,
-        mockValueCounts,
-        { includeCharts: true },
-      );
+      const model = new ColumnChartSpecModel({
+        data: "/@file/data.csv",
+        fieldTypes: mockFieldTypes,
+        stats: mockStats,
+        binValues: mockBinValues,
+        valueCounts: mockValueCounts,
+        opts: { includeCharts: true },
+      });
 
       const summary = model.getHeaderSummary("date");
       expect(summary.spec).toBeDefined();
@@ -456,14 +456,14 @@ describe("ColumnChartSpecModel", () => {
     });
 
     it("should handle absolute HTTP URLs", () => {
-      const model = new ColumnChartSpecModel(
-        "https://external.com/data.csv",
-        mockFieldTypes,
-        mockStats,
-        mockBinValues,
-        mockValueCounts,
-        { includeCharts: true },
-      );
+      const model = new ColumnChartSpecModel({
+        data: "https://external.com/data.csv",
+        fieldTypes: mockFieldTypes,
+        stats: mockStats,
+        binValues: mockBinValues,
+        valueCounts: mockValueCounts,
+        opts: { includeCharts: true },
+      });
 
       const summary = model.getHeaderSummary("date");
       expect(summary.spec).toBeDefined();
@@ -473,14 +473,14 @@ describe("ColumnChartSpecModel", () => {
 
     it("should handle data URLs", () => {
       const dataUrl = "data:text/csv;base64,YSxiLGMKMSwyLDMKNCw1LDY=";
-      const model = new ColumnChartSpecModel(
-        dataUrl,
-        mockFieldTypes,
-        mockStats,
-        mockBinValues,
-        mockValueCounts,
-        { includeCharts: true },
-      );
+      const model = new ColumnChartSpecModel({
+        data: dataUrl,
+        fieldTypes: mockFieldTypes,
+        stats: mockStats,
+        binValues: mockBinValues,
+        valueCounts: mockValueCounts,
+        opts: { includeCharts: true },
+      });
 
       const summary = model.getHeaderSummary("date");
       expect(summary.spec).toBeDefined();
@@ -491,14 +491,14 @@ describe("ColumnChartSpecModel", () => {
 
     it("should handle CSV string data", () => {
       const csvString = "a,b,c\n1,2,3\n4,5,6";
-      const model = new ColumnChartSpecModel(
-        csvString,
-        mockFieldTypes,
-        mockStats,
-        mockBinValues,
-        mockValueCounts,
-        { includeCharts: true },
-      );
+      const model = new ColumnChartSpecModel({
+        data: csvString,
+        fieldTypes: mockFieldTypes,
+        stats: mockStats,
+        binValues: mockBinValues,
+        valueCounts: mockValueCounts,
+        opts: { includeCharts: true },
+      });
 
       const summary = model.getHeaderSummary("date");
       expect(summary.spec).toBeDefined();
@@ -509,14 +509,14 @@ describe("ColumnChartSpecModel", () => {
 
     it("should handle arrow data", () => {
       const arrowData = "ARROW1\n";
-      const model = new ColumnChartSpecModel(
-        `data:text/plain;base64,${btoa(arrowData)}`,
-        mockFieldTypes,
-        mockStats,
-        mockBinValues,
-        mockValueCounts,
-        { includeCharts: true },
-      );
+      const model = new ColumnChartSpecModel({
+        data: `data:text/plain;base64,${btoa(arrowData)}`,
+        fieldTypes: mockFieldTypes,
+        stats: mockStats,
+        binValues: mockBinValues,
+        valueCounts: mockValueCounts,
+        opts: { includeCharts: true },
+      });
       const spec = model.getHeaderSummary("date").spec;
       expect(spec).toMatchSnapshot();
       expect(spec?.data?.format?.type).toBe("arrow");
@@ -529,14 +529,14 @@ describe("ColumnChartSpecModel", () => {
         { a: 1, b: 2, c: 3 },
         { a: 4, b: 5, c: 6 },
       ];
-      const model = new ColumnChartSpecModel(
-        arrayData,
-        mockFieldTypes,
-        mockStats,
-        mockBinValues,
-        mockValueCounts,
-        { includeCharts: true },
-      );
+      const model = new ColumnChartSpecModel({
+        data: arrayData,
+        fieldTypes: mockFieldTypes,
+        stats: mockStats,
+        binValues: mockBinValues,
+        valueCounts: mockValueCounts,
+        opts: { includeCharts: true },
+      });
 
       const summary = model.getHeaderSummary("date");
       expect(summary.spec).toBeDefined();

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