@marimo-team/frontend 0.23.2-dev6 → 0.23.2-dev61

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

@@ -2,7 +2,7 @@
 "use no memo";
 
 import type { Table } from "@tanstack/react-table";
-import { range } from "lodash-es";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,9 +37,6 @@ import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { prettyNumber } from "@/utils/numbers";
 import { PluralWord } from "@/utils/pluralize";
-import type { PageRange } from "./types";
-
-const MAX_PAGES_BEFORE_CLAMPING = 100;
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
@@ -189,6 +186,81 @@ export const DataTablePagination = <TData,>({
   );
 };
 
+const PAGE_ITEM_HEIGHT = 32;
+
+/**
+ * Compute contiguous ranges of page numbers whose string starts with `prefix`,
+ * without scanning every page. O(log10(totalPages)).
+ *
+ * For prefix "5", totalPages=500: [[5,5], [50,59], [500,500]]
+ */
+export function matchingPageRanges(
+  prefix: string,
+  totalPages: number,
+): [number, number][] {
+  const n = Number.parseInt(prefix, 10);
+  if (Number.isNaN(n) || n <= 0 || String(n) !== prefix) {
+    return [];
+  }
+
+  const ranges: [number, number][] = [];
+  let power = 1;
+  while (n * power <= totalPages) {
+    const start = n * power;
+    const end = Math.min((n + 1) * power - 1, totalPages);
+    ranges.push([start, end]);
+    power *= 10;
+  }
+  return ranges;
+}
+
+interface PageMapping {
+  count: number;
+  pageAtIndex: (index: number) => number;
+  indexOfPage: (page: number) => number;
+}
+
+function createPageMapping(search: string, totalPages: number): PageMapping {
+  if (search === "") {
+    return {
+      count: totalPages,
+      pageAtIndex: (i) => i + 1,
+      indexOfPage: (p) => p - 1,
+    };
+  }
+
+  const ranges = matchingPageRanges(search, totalPages);
+  let count = 0;
+  for (const [s, e] of ranges) {
+    count += e - s + 1;
+  }
+
+  return {
+    count,
+    pageAtIndex: (i) => {
+      let offset = 0;
+      for (const [start, end] of ranges) {
+        const size = end - start + 1;
+        if (i < offset + size) {
+          return start + (i - offset);
+        }
+        offset += size;
+      }
+      return -1;
+    },
+    indexOfPage: (p) => {
+      let offset = 0;
+      for (const [start, end] of ranges) {
+        if (p >= start && p <= end) {
+          return offset + (p - start);
+        }
+        offset += end - start + 1;
+      }
+      return -1;
+    },
+  };
+}
+
 export const PageSelector = ({
   currentPage,
   totalPages,
@@ -199,19 +271,31 @@ export const PageSelector = ({
   onPageChange: (page: number) => void;
 }) => {
   const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
 
-  const pageRanges = React.useMemo(
-    () => getPageRanges(currentPage, totalPages),
-    [currentPage, totalPages],
+  const mapping = React.useMemo(
+    () => createPageMapping(search, totalPages),
+    [search, totalPages],
   );
 
   const handleSelect = (page: number) => {
     onPageChange(page - 1);
+    setSearch("");
     setOpen(false);
   };
 
+  const listHeight = Math.min(mapping.count * PAGE_ITEM_HEIGHT, 240);
+
   return (
-    <Popover open={totalPages > 1 ? open : false} onOpenChange={setOpen}>
+    <Popover
+      open={totalPages > 1 ? open : false}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) {
+          setSearch("");
+        }
+      }}
+    >
       <PopoverTrigger asChild={true} disabled={totalPages <= 1}>
         <button
           type="button"
@@ -229,18 +313,15 @@ export const PageSelector = ({
         </button>
       </PopoverTrigger>
       <PopoverContent className="w-36 p-0" align="center" sideOffset={6}>
-        <Command
-          shouldFilter={true}
-          filter={(value, search) => {
-            return value.startsWith(search) ? 1 : 0;
-          }}
-        >
+        <Command shouldFilter={false} value={String(currentPage)}>
           <CommandInput
             placeholder={`Page (1–${totalPages})`}
             rootClassName="px-2 h-8"
             className="text-xs h-8"
             autoFocus={true}
             icon={null}
+            value={search}
+            onValueChange={setSearch}
             onKeyDown={(e) => {
               // Allow navigation/editing keys, block non-numeric input
               const allowed = [
@@ -248,6 +329,8 @@ export const PageSelector = ({
                 "Delete",
                 "ArrowLeft",
                 "ArrowRight",
+                "ArrowUp",
+                "ArrowDown",
                 "Tab",
                 "Enter",
                 "Escape",
@@ -257,27 +340,19 @@ export const PageSelector = ({
               }
             }}
           />
-          <CommandList className="max-h-60">
-            {pageRanges.map((item) =>
-              item.type === "ellipsis" ? null : (
-                <CommandItem
-                  key={item.page}
-                  value={String(item.page)}
-                  data-testid="page-option"
-                  className={cn(
-                    "text-xs cursor-pointer",
-                    item.page === currentPage && "font-semibold bg-accent",
-                  )}
-                  onSelect={() => handleSelect(item.page)}
-                  onMouseDown={Events.preventFocus}
-                >
-                  {item.page}
-                </CommandItem>
-              ),
+          <CommandList className="max-h-60 overflow-hidden">
+            {mapping.count === 0 ? (
+              <CommandEmpty className="py-2 text-center text-xs text-muted-foreground">
+                No matching page
+              </CommandEmpty>
+            ) : (
+              <VirtualizedPageList
+                mapping={mapping}
+                currentPage={currentPage}
+                listHeight={listHeight}
+                onSelect={handleSelect}
+              />
             )}
-            <CommandEmpty className="py-2 text-center text-xs text-muted-foreground">
-              No matching page
-            </CommandEmpty>
           </CommandList>
         </Command>
       </PopoverContent>
@@ -285,57 +360,95 @@ export const PageSelector = ({
   );
 };
 
-export function getPageRanges(
-  currentPage: number,
-  totalPages: number,
-): PageRange[] {
-  if (totalPages <= MAX_PAGES_BEFORE_CLAMPING) {
-    return range(totalPages).map((i) => ({ type: "page", page: i + 1 }));
-  }
-
-  const middle = Math.floor(totalPages / 2);
-
-  const items: PageRange[] = [];
-  const addPages = (start: number, count: number) => {
-    for (let i = 0; i < count; i++) {
-      items.push({ type: "page", page: start + i });
-    }
-  };
-
-  addPages(1, 10);
-  items.push({ type: "ellipsis", key: "e1" });
-
-  if (currentPage > 10 && currentPage <= middle - 5) {
-    items.push(
-      { type: "page", page: currentPage },
-      { type: "ellipsis", key: "e1b" },
-    );
-  }
+const VirtualizedPageList = ({
+  mapping,
+  currentPage,
+  listHeight,
+  onSelect,
+}: {
+  mapping: PageMapping;
+  currentPage: number;
+  listHeight: number;
+  onSelect: (page: number) => void;
+}) => {
+  const parentRef = React.useRef<HTMLDivElement>(null);
 
-  addPages(middle - 4, 10);
-  items.push({ type: "ellipsis", key: "e2" });
+  const currentIndex = mapping.indexOfPage(currentPage);
 
-  if (currentPage > middle + 5 && currentPage <= totalPages - 10) {
-    items.push(
-      { type: "page", page: currentPage },
-      { type: "ellipsis", key: "e2b" },
-    );
-  }
+  const virtualizer = useVirtualizer({
+    count: mapping.count,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => PAGE_ITEM_HEIGHT,
+    overscan: 10,
+    initialOffset:
+      currentIndex > 0
+        ? Math.max(0, currentIndex * PAGE_ITEM_HEIGHT - listHeight / 2)
+        : 0,
+  });
 
-  addPages(totalPages - 9, 10);
+  // Scroll to top when filtered results change (user is searching)
+  const prevCount = React.useRef(mapping.count);
+  React.useEffect(() => {
+    if (mapping.count !== prevCount.current) {
+      virtualizer.scrollToIndex(0);
+      prevCount.current = mapping.count;
+    }
+  }, [mapping.count, virtualizer]);
 
-  return items;
-}
+  return (
+    <div ref={parentRef} style={{ height: listHeight, overflow: "auto" }}>
+      <div
+        style={{
+          height: virtualizer.getTotalSize(),
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        {virtualizer.getVirtualItems().map((virtualItem) => {
+          const page = mapping.pageAtIndex(virtualItem.index);
+          return (
+            <CommandItem
+              key={page}
+              value={String(page)}
+              data-testid="page-option"
+              aria-selected={page === currentPage}
+              className={cn(
+                "text-xs cursor-pointer",
+                page === currentPage && "font-semibold bg-accent",
+              )}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: virtualItem.size,
+                transform: `translateY(${virtualItem.start}px)`,
+              }}
+              onSelect={() => onSelect(page)}
+              onMouseDown={Events.preventFocus}
+            >
+              {page}
+            </CommandItem>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
 
 export function prettifyRowCount(rowCount: number, locale: string): string {
   return `${prettyNumber(rowCount, locale)} ${new PluralWord("row").pluralize(rowCount)}`;
 }
 
-export const prettifyRowColumnCount = (
-  numRows: number | "too_many",
-  totalColumns: number,
-  locale: string,
-): string => {
+export const prettifyRowColumnCount = ({
+  numRows,
+  totalColumns,
+  locale,
+}: {
+  numRows: number | "too_many";
+  totalColumns: number;
+  locale: string;
+}): string => {
   const rowsLabel =
     numRows === "too_many" ? "Unknown" : prettifyRowCount(numRows, locale);
   const columnsLabel = `${prettyNumber(totalColumns, locale)} ${new PluralWord("column").pluralize(totalColumns)}`;

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

@@ -5,7 +5,12 @@ import { rpc } from "@/plugins/core/rpc";
 
 export type DownloadAsArgs = (req: {
   format: "csv" | "json" | "parquet";
-}) => Promise<{ url: string; filename: string }>;
+}) => Promise<{
+  url: string;
+  filename: string;
+  error?: string | null;
+  missing_packages?: string[] | null;
+}>;
 
 export const DownloadAsSchema = rpc
   .input(
@@ -17,5 +22,7 @@ export const DownloadAsSchema = rpc
     z.object({
       url: z.string(),
       filename: z.string(),
+      error: z.string().nullish(),
+      missing_packages: z.array(z.string()).nullish(),
     }),
   );

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

@@ -0,0 +1,90 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { CellValueSentinel, CellValueSentinelType } from "./types";
+
+const WHITESPACE_CHARS: Record<string, { marker: string; name: string }> = {
+  " ": { marker: "\u2423", name: "space" }, // open box (space symbol)
+  "\t": { marker: "\\t", name: "tab" },
+  "\n": { marker: "\\n", name: "newline" },
+  "\r": { marker: "\\r", name: "newline" },
+};
+
+function renderWhitespaceMarkers(str: string): string {
+  return [...str].map((ch) => WHITESPACE_CHARS[ch]?.marker ?? ch).join("");
+}
+
+function describeWhitespace(str: string): string {
+  const counts: Record<string, number> = {};
+  for (const ch of str) {
+    const name = WHITESPACE_CHARS[ch]?.name ?? "character";
+    counts[name] = (counts[name] ?? 0) + 1;
+  }
+  return Object.entries(counts)
+    .map(([name, count]) => `${count} ${name}${count > 1 ? "s" : ""}`)
+    .join(", ");
+}
+
+interface SentinelConfig {
+  label: (value: CellValueSentinel["value"]) => string;
+  tooltip: (value: CellValueSentinel["value"]) => string;
+  ariaLabel: (value: CellValueSentinel["value"]) => string;
+}
+
+const SENTINEL_CONFIG: Record<CellValueSentinelType, SentinelConfig> = {
+  null: {
+    label: () => "None",
+    tooltip: () => "None",
+    ariaLabel: () => "None",
+  },
+  "empty-string": {
+    label: () => "<empty>",
+    tooltip: () => "<empty>",
+    ariaLabel: () => "empty string",
+  },
+  whitespace: {
+    label: (value) => renderWhitespaceMarkers(String(value)),
+    tooltip: (value) => describeWhitespace(String(value)),
+    ariaLabel: (value) => describeWhitespace(String(value)),
+  },
+  nan: {
+    label: () => "NaN",
+    tooltip: () => "NaN",
+    ariaLabel: () => "NaN",
+  },
+  "positive-infinity": {
+    label: () => "inf",
+    tooltip: () => "Infinity",
+    ariaLabel: () => "infinity",
+  },
+  "negative-infinity": {
+    label: () => "-inf",
+    tooltip: () => "-Infinity",
+    ariaLabel: () => "negative infinity",
+  },
+  nat: {
+    label: () => "NaT",
+    tooltip: () => "NaT (Not a Time)",
+    ariaLabel: () => "Not a Time",
+  },
+};
+
+export function SentinelCell({
+  sentinel,
+}: {
+  sentinel: CellValueSentinel;
+}): React.ReactElement {
+  const config = SENTINEL_CONFIG[sentinel.type];
+  const label = config.label(sentinel.value);
+  const tooltip = config.tooltip(sentinel.value);
+  const ariaLabel = config.ariaLabel(sentinel.value);
+
+  return (
+    <span
+      className="italic text-muted-foreground bg-muted rounded px-1"
+      aria-label={ariaLabel}
+      title={tooltip}
+    >
+      <span className="opacity-70">{label}</span>
+    </span>
+  );
+}

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

@@ -95,6 +95,29 @@ export type DataTableSelection =
   | "multi-cell"
   | null;
 
+export type CellValueSentinel =
+  | { type: "null"; value: null | undefined }
+  | { type: "empty-string"; value: string }
+  | { type: "whitespace"; value: string }
+  | { type: "nan"; value: number | string }
+  | { type: "positive-infinity"; value: number | string }
+  | { type: "negative-infinity"; value: number | string }
+  | { type: "nat"; value: string };
+
+export type CellValueSentinelType = CellValueSentinel["type"];
+
+export function isNumericType(
+  dataType: DataType | undefined,
+): dataType is "number" | "integer" {
+  return dataType === "number" || dataType === "integer";
+}
+
+export function isTemporalType(
+  dataType: DataType | undefined,
+): dataType is "date" | "datetime" | "time" {
+  return dataType === "date" || dataType === "datetime" || dataType === "time";
+}
+
 export function extractTimezone(dtype: string | undefined): string | undefined {
   if (!dtype) {
     return undefined;
@@ -105,7 +128,3 @@ export function extractTimezone(dtype: string | undefined): string | undefined {
   const match = /^datetime(?:64)?\[[^,]+,([^,]+)]$/.exec(dtype);
   return match?.[1]?.trim();
 }
-
-export type PageRange =
-  | { type: "page"; page: number }
-  | { type: "ellipsis"; key: string };

package/src/components/data-table/utils.ts

@@ -5,7 +5,15 @@ import type { TableData } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
 import { jsonParseWithSpecialChar } from "@/utils/json/json-parser";
 import { getMimeValues } from "./mime-cell";
-import { INDEX_COLUMN_NAME } from "./types";
+import type { DataType } from "@/core/kernel/messages";
+import {
+  type CellValueSentinel,
+  INDEX_COLUMN_NAME,
+  isNumericType,
+  isTemporalType,
+} from "./types";
+
+const WHITESPACE_ONLY_RE = /^[\s]+$/;
 
 /**
  * Convenience function to load table data.
@@ -85,6 +93,71 @@ export function getPageIndexForRow(
   return null;
 }
 
+// String representations of numeric special values.
+// Only matched when the caller indicates the column is numeric.
+type StringValueSentinelType = Extract<
+  CellValueSentinel,
+  { value: number | string }
+>["type"];
+
+const NUMERIC_STRING_SPECIALS: Record<string, StringValueSentinelType> = {
+  NaN: "nan",
+  Infinity: "positive-infinity",
+  "-Infinity": "negative-infinity",
+  inf: "positive-infinity",
+  "-inf": "negative-infinity",
+};
+
+/**
+ * Detect if a cell value is a sentinel (null, empty string, whitespace,
+ * NaN, infinity, NaT). Column-type-dependent sentinels (string "NaN",
+ * "NaT", etc.) are matched based on `dataType`.
+ */
+export function detectSentinel(
+  value: unknown,
+  dataType: DataType | undefined,
+): CellValueSentinel | null {
+  if (value == null) {
+    return { type: "null", value };
+  }
+
+  if (typeof value === "string") {
+    if (value === "") {
+      return { type: "empty-string", value };
+    }
+    if (WHITESPACE_ONLY_RE.test(value)) {
+      return { type: "whitespace", value };
+    }
+    // String "NaN"/"Infinity" in a numeric column = actual special float value
+    if (isNumericType(dataType)) {
+      const type = NUMERIC_STRING_SPECIALS[value];
+      if (type) {
+        return { type, value };
+      }
+    }
+    // String "NaT" in a temporal column = pandas Not-a-Time sentinel
+    if (isTemporalType(dataType) && value === "NaT") {
+      return { type: "nat", value };
+    }
+    return null;
+  }
+
+  if (typeof value === "number") {
+    if (Number.isNaN(value)) {
+      return { type: "nan", value };
+    }
+    if (value === Number.POSITIVE_INFINITY) {
+      return { type: "positive-infinity", value };
+    }
+    if (value === Number.NEGATIVE_INFINITY) {
+      return { type: "negative-infinity", value };
+    }
+    return null;
+  }
+
+  return null;
+}
+
 /**
  * Stringify an unknown value. Converts objects to JSON strings.
  * @param opts.value - The value to stringify.

package/src/components/datasources/__tests__/missing-package-prompt.test.tsx

@@ -0,0 +1,103 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen } from "@testing-library/react";
+import { Provider } from "jotai";
+import React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { viewStateAtom } from "@/core/mode";
+import { requestClientAtom } from "@/core/network/requests";
+import { store } from "@/core/state/jotai";
+import { MissingPackagePrompt } from "../missing-package-prompt";
+
+const mockOpenApplication = vi.fn();
+vi.mock("@/components/editor/chrome/state", () => ({
+  useChromeActions: () => ({
+    openApplication: mockOpenApplication,
+  }),
+}));
+
+vi.mock("@/components/editor/chrome/panels/packages-state", () => ({
+  packagesToInstallAtom: {},
+}));
+
+const mockRequestAnimationFrame = vi.fn((callback) => {
+  callback();
+  return 1;
+});
+vi.stubGlobal("requestAnimationFrame", mockRequestAnimationFrame);
+
+const mockInput = {
+  focus: vi.fn(),
+  value: "",
+  dispatchEvent: vi.fn(),
+};
+vi.spyOn(document, "getElementById").mockReturnValue(
+  mockInput as unknown as HTMLInputElement,
+);
+
+function createTestWrapper() {
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+  return { wrapper };
+}
+
+describe("MissingPackagePrompt", () => {
+  const { wrapper } = createTestWrapper();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    store.set(requestClientAtom, MockRequestClient.create());
+    store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+  });
+
+  it("should render backend description and install button in edit mode", () => {
+    render(
+      <MissingPackagePrompt
+        packages={["polars"]}
+        featureName="Parquet export"
+        description="Parquet export requires a DataFrame library."
+      />,
+      { wrapper },
+    );
+    expect(
+      screen.getByText("Parquet export requires a DataFrame library."),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Install polars")).toBeInTheDocument();
+  });
+
+  it("should fall back to generic copy when description is absent", () => {
+    render(
+      <MissingPackagePrompt
+        packages={["polars"]}
+        featureName="Parquet export"
+      />,
+      { wrapper },
+    );
+    expect(
+      screen.getByText("Parquet export requires polars"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Install polars")).toBeInTheDocument();
+  });
+
+  it("should render generic line in read mode and not leak packages or description", () => {
+    store.set(viewStateAtom, { mode: "read", cellAnchor: null });
+    render(
+      <MissingPackagePrompt
+        packages={["polars"]}
+        featureName="Parquet export"
+        description="Install polars to enable Parquet."
+      />,
+      { wrapper },
+    );
+    expect(
+      screen.getByText("Parquet export isn't available in this notebook"),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("Install polars to enable Parquet."),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("Install polars")).not.toBeInTheDocument();
+    expect(screen.queryByText(/polars/)).not.toBeInTheDocument();
+  });
+});