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

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

@@ -3,6 +3,7 @@
 import type { Table } from "@tanstack/react-table";
 import { describe, expect, it } from "vitest";
 import {
+  detectSentinel,
   getClipboardContent,
   getPageIndexForRow,
   getRawValue,
@@ -186,6 +187,133 @@ describe("getClipboardContent", () => {
   });
 });
 
+describe("detectSentinel", () => {
+  it("should detect null and undefined", () => {
+    expect(detectSentinel(null, undefined)).toEqual({
+      type: "null",
+      value: null,
+    });
+    expect(detectSentinel(undefined, undefined)).toEqual({
+      type: "null",
+      value: undefined,
+    });
+  });
+
+  it("should detect empty string", () => {
+    expect(detectSentinel("", "string")).toEqual({
+      type: "empty-string",
+      value: "",
+    });
+  });
+
+  it("should detect whitespace-only strings", () => {
+    expect(detectSentinel(" ", "string")).toEqual({
+      type: "whitespace",
+      value: " ",
+    });
+    expect(detectSentinel("   ", "string")).toEqual({
+      type: "whitespace",
+      value: "   ",
+    });
+    expect(detectSentinel("\t", "string")).toEqual({
+      type: "whitespace",
+      value: "\t",
+    });
+    expect(detectSentinel("\n", "string")).toEqual({
+      type: "whitespace",
+      value: "\n",
+    });
+    expect(detectSentinel("\t \n", "string")).toEqual({
+      type: "whitespace",
+      value: "\t \n",
+    });
+  });
+
+  it("should detect NaN", () => {
+    expect(detectSentinel(Number.NaN, "number")).toEqual({
+      type: "nan",
+      value: Number.NaN,
+    });
+  });
+
+  it("should detect Infinity", () => {
+    expect(detectSentinel(Number.POSITIVE_INFINITY, "number")).toEqual({
+      type: "positive-infinity",
+      value: Number.POSITIVE_INFINITY,
+    });
+    expect(detectSentinel(Number.NEGATIVE_INFINITY, "number")).toEqual({
+      type: "negative-infinity",
+      value: Number.NEGATIVE_INFINITY,
+    });
+  });
+
+  it("should return null for normal values", () => {
+    expect(detectSentinel("hello", "string")).toBeNull();
+    expect(detectSentinel(42, "number")).toBeNull();
+    expect(detectSentinel(0, "number")).toBeNull();
+    expect(detectSentinel(-1.5, "number")).toBeNull();
+    expect(detectSentinel(true, "boolean")).toBeNull();
+    expect(detectSentinel(false, "boolean")).toBeNull();
+    expect(detectSentinel({}, "unknown")).toBeNull();
+    expect(detectSentinel([], "unknown")).toBeNull();
+  });
+
+  it("should not match literal null-like strings", () => {
+    expect(detectSentinel("null", "string")).toBeNull();
+    expect(detectSentinel("NULL", "string")).toBeNull();
+    expect(detectSentinel("None", "string")).toBeNull();
+  });
+
+  it("should not match string NaN/Infinity in non-numeric columns", () => {
+    expect(detectSentinel("NaN", "string")).toBeNull();
+    expect(detectSentinel("Infinity", "string")).toBeNull();
+    expect(detectSentinel("-Infinity", "string")).toBeNull();
+  });
+
+  it("should match string NaN/Infinity in numeric columns", () => {
+    expect(detectSentinel("NaN", "number")).toEqual({
+      type: "nan",
+      value: "NaN",
+    });
+    expect(detectSentinel("Infinity", "number")).toEqual({
+      type: "positive-infinity",
+      value: "Infinity",
+    });
+    expect(detectSentinel("-Infinity", "number")).toEqual({
+      type: "negative-infinity",
+      value: "-Infinity",
+    });
+    expect(detectSentinel("inf", "number")).toEqual({
+      type: "positive-infinity",
+      value: "inf",
+    });
+    expect(detectSentinel("-inf", "number")).toEqual({
+      type: "negative-infinity",
+      value: "-inf",
+    });
+  });
+
+  it("should still not match normal strings in numeric columns", () => {
+    expect(detectSentinel("hello", "number")).toBeNull();
+    expect(detectSentinel("42", "number")).toBeNull();
+  });
+
+  it("should not match NaT in non-temporal columns", () => {
+    expect(detectSentinel("NaT", "string")).toBeNull();
+  });
+
+  it("should match NaT in temporal columns", () => {
+    expect(detectSentinel("NaT", "datetime")).toEqual({
+      type: "nat",
+      value: "NaT",
+    });
+    expect(detectSentinel("NaT", "date")).toEqual({
+      type: "nat",
+      value: "NaT",
+    });
+  });
+});
+
 function createMockTableWithMeta<TData>(rawData?: TData[]): Table<TData> {
   return {
     options: {

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -74,7 +74,7 @@ export const ColumnExplorerPanel = ({
   return (
     <div className="mb-3">
       <span className="text-xs font-semibold ml-2 flex">
-        {prettifyRowColumnCount(totalRows, totalColumns, locale)}
+        {prettifyRowColumnCount({ numRows: totalRows, totalColumns, locale })}
         <CopyClipboardIcon
           tooltip="Copy column names"
           value={columns?.map(([columnName]) => columnName).join(",\n") || ""}

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

@@ -53,6 +53,7 @@ import {
   SelectValue,
 } from "../ui/select";
 import { type ColumnFilterForType, Filter } from "./filters";
+import { SentinelCell } from "./sentinel-cell";
 import {
   ClearFilterMenuItem,
   FilterButtons,
@@ -65,7 +66,7 @@ import {
   renderSortFilterIcon,
   renderSorts,
 } from "./header-items";
-import { stringifyUnknownValue } from "./utils";
+import { detectSentinel, stringifyUnknownValue } from "./utils";
 
 const TOP_K_ROWS = 30;
 
@@ -647,6 +648,10 @@ const PopoverFilterByValues = <TData, TValue>({
             {filteredData.map(([value, count], rowIndex) => {
               const isSelected = chosenValues.has(value);
               const valueString = stringifyUnknownValue({ value });
+              const sentinel = detectSentinel(
+                value,
+                column.columnDef.meta?.dataType,
+              );
 
               return (
                 <CommandItem
@@ -661,7 +666,11 @@ const PopoverFilterByValues = <TData, TValue>({
                     className="mr-3 h-3.5 w-3.5"
                   />
                   <span className="flex-1 overflow-hidden max-h-20 line-clamp-3">
-                    {valueString}
+                    {sentinel ? (
+                      <SentinelCell sentinel={sentinel} />
+                    ) : (
+                      valueString
+                    )}
                   </span>
                   <span className="ml-3">{count}</span>
                 </CommandItem>

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

@@ -37,7 +37,10 @@ import {
   extractTimezone,
   type FieldTypesWithExternalType,
   INDEX_COLUMN_NAME,
+  isNumericType,
 } from "./types";
+import { SentinelCell } from "./sentinel-cell";
+import { detectSentinel } from "./utils";
 import { uniformSample } from "./uniformSample";
 import { MarkdownUrlDetector, UrlDetector } from "./url-detector";
 
@@ -163,7 +166,7 @@ export function generateColumns<T>({
     }
     // Auto right-align numeric columns
     const dataType = getMeta(key).dataType;
-    if (dataType === "number" || dataType === "integer") {
+    if (isNumericType(dataType)) {
       return "right";
     }
     return undefined;
@@ -269,7 +272,7 @@ export function generateColumns<T>({
           !isCellSelected;
 
         const dataType = column.columnDef.meta?.dataType;
-        const isNumeric = dataType === "number" || dataType === "integer";
+        const isNumeric = isNumericType(dataType);
         const cellStyles = getCellStyleClass({
           justify,
           wrapped,
@@ -522,6 +525,17 @@ export function renderCellValue<TData, TValue>({
 
   const isWrapped = column.getColumnWrapping?.() === "wrap";
 
+  // Sentinel values (null, whitespace, NaN, Infinity, NaT) rendered specially.
+  // Empty strings are left as-is
+  const sentinel = detectSentinel(value, dataType);
+  if (sentinel && sentinel.type !== "empty-string") {
+    return (
+      <div onClick={selectCell} className={cellStyles}>
+        <SentinelCell sentinel={sentinel} />
+      </div>
+    );
+  }
+
   if (dataType === "datetime" && typeof value === "string") {
     try {
       if (!isValid(value)) {

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

@@ -20,6 +20,7 @@ import {
   jsonToMarkdown,
   jsonToTSV,
 } from "@/utils/json/json-parser";
+import { MissingPackagePrompt } from "../datasources/missing-package-prompt";
 import { Button } from "../ui/button";
 import {
   DropdownMenu,
@@ -38,6 +39,8 @@ export interface ExportActionProps {
   downloadAs: (req: { format: DownloadFormat }) => Promise<{
     url: string;
     filename: string;
+    error?: string | null;
+    missing_packages?: string[] | null;
   }>;
 }
 
@@ -81,6 +84,8 @@ const copyOptions = [
   FILE_TYPES.CSV,
   FILE_TYPES.MARKDOWN,
 ];
+const labelForDownloadFormat = (format: DownloadFormat): string =>
+  downloadOptions.find((opt) => opt.format === format)?.label ?? format;
 
 export const ExportMenu: React.FC<ExportActionProps> = (props) => {
   const { locale } = useLocale();
@@ -101,43 +106,82 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
     </Button>
   );
 
-  const getDownloadResult = (format: DownloadFormat) => {
-    return props.downloadAs({ format }).catch((error) => {
+  const resolveDownloadUrl = async (
+    format: DownloadFormat,
+    onRetry: () => void,
+  ): Promise<{ url: string; filename: string } | null> => {
+    let response: Awaited<ReturnType<typeof props.downloadAs>>;
+    try {
+      response = await props.downloadAs({ format });
+    } catch (error) {
       toast({
         title: "Failed to download",
-        description: "message" in error ? error.message : String(error),
+        description:
+          error != null && typeof error === "object" && "message" in error
+            ? String(error.message)
+            : String(error),
       });
-      throw error;
+      return null;
+    }
+
+    if (response.missing_packages && response.missing_packages.length > 0) {
+      toast({
+        title: "Export failed",
+        description: (
+          <MissingPackagePrompt
+            packages={response.missing_packages}
+            featureName={`${labelForDownloadFormat(format)} export`}
+            description={response.error}
+            onInstall={onRetry}
+          />
+        ),
+      });
+      return null;
+    }
+
+    return { url: response.url, filename: response.filename };
+  };
+
+  const handleDownload = async (format: DownloadFormat) => {
+    const result = await resolveDownloadUrl(format, () => {
+      void handleDownload(format);
     });
+    if (!result) {
+      return;
+    }
+    const rawName = (result.filename ?? "").trim();
+    const baseName = Filenames.withoutExtension(rawName) || "download";
+    downloadByURL(result.url, `${baseName}.${format}`);
   };
 
   const handleClipboardCopy = async (
     format: (typeof copyOptions)[number]["format"],
   ) => {
-    let text: string;
+    const sourceFormat: DownloadFormat = format === "csv" ? "csv" : "json";
+    const result = await resolveDownloadUrl(sourceFormat, () => {
+      void handleClipboardCopy(format);
+    });
+    if (!result) {
+      return;
+    }
 
+    let text: string;
     switch (format) {
       case "tsv": {
-        const { url } = await getDownloadResult("json");
-        const json = await fetchJson(url);
+        const json = await fetchJson(result.url);
         text = jsonToTSV(json, locale);
         break;
       }
       case "json": {
-        const { url } = await getDownloadResult("json");
-        const json = await fetchJson(url);
+        const json = await fetchJson(result.url);
         text = JSON.stringify(json, null, 2);
         break;
       }
-      case "csv": {
-        const { url } = await getDownloadResult("csv");
-        const csv = await fetchText(url);
-        text = csv;
+      case "csv":
+        text = await fetchText(result.url);
         break;
-      }
       case "markdown": {
-        const { url } = await getDownloadResult("json");
-        const json = await fetchJson(url);
+        const json = await fetchJson(result.url);
         text = jsonToMarkdown(json);
         break;
       }
@@ -164,13 +208,8 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
         {downloadOptions.map((option) => (
           <DropdownMenuItem
             key={option.label}
-            onSelect={async () => {
-              const { url, filename } = await getDownloadResult(option.format);
-              const ext = option.format;
-              const rawName = (filename ?? "").trim();
-              const baseName =
-                Filenames.withoutExtension(rawName) || "download";
-              downloadByURL(url, `${baseName}.${ext}`);
+            onSelect={() => {
+              void handleDownload(option.format);
             }}
           >
             <option.icon className="mo-dropdown-icon" />

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

@@ -1,9 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 "use no memo";
 
-import type { RowData } from "@tanstack/react-table";
+import type { ColumnFiltersState, RowData } from "@tanstack/react-table";
 import type { DataType } from "@/core/kernel/messages";
-import type { ConditionType } from "@/plugins/impl/data-frames/schema";
+import type {
+  FilterConditionType,
+  FilterGroupType,
+} from "@/plugins/impl/data-frames/schema";
 import type { ColumnId } from "@/plugins/impl/data-frames/types";
 import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
 import { assertNever } from "@/utils/assertNever";
@@ -84,28 +87,34 @@ export type ColumnFilterForType<T extends FilterType> = T extends FilterType
 export function filterToFilterCondition(
   columnIdString: string,
   filter: ColumnFilterValue | undefined,
-): ConditionType[] | ConditionType {
+): FilterConditionType[] {
   if (!filter) {
     return [];
   }
   const columnId = columnIdString as ColumnId;
 
   if (filter.operator === "is_null" || filter.operator === "is_not_null") {
-    return {
-      column_id: columnId,
-      operator: filter.operator,
-      value: undefined,
-    };
+    return [
+      {
+        column_id: columnId,
+        operator: filter.operator,
+        value: undefined,
+        type: "condition",
+        negate: false,
+      },
+    ];
   }
 
   switch (filter.type) {
     case "number": {
-      const conditions: ConditionType[] = [];
+      const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
         conditions.push({
           column_id: columnId,
           operator: ">=",
           value: filter.min,
+          type: "condition",
+          negate: false,
         });
       }
       if (filter.max !== undefined) {
@@ -113,23 +122,31 @@ export function filterToFilterCondition(
           column_id: columnId,
           operator: "<=",
           value: filter.max,
+          type: "condition",
+          negate: false,
         });
       }
       return conditions;
     }
     case "text":
-      return {
-        column_id: columnId,
-        operator: filter.operator,
-        value: filter.text,
-      };
+      return [
+        {
+          column_id: columnId,
+          operator: filter.operator,
+          value: filter.text,
+          type: "condition",
+          negate: false,
+        },
+      ];
     case "datetime": {
-      const conditions: ConditionType[] = [];
+      const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
         conditions.push({
           column_id: columnId,
           operator: ">=",
           value: filter.min.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       if (filter.max !== undefined) {
@@ -137,17 +154,21 @@ export function filterToFilterCondition(
           column_id: columnId,
           operator: "<=",
           value: filter.max.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       return conditions;
     }
     case "date": {
-      const conditions: ConditionType[] = [];
+      const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
         conditions.push({
           column_id: columnId,
           operator: ">=",
           value: filter.min.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       if (filter.max !== undefined) {
@@ -155,17 +176,21 @@ export function filterToFilterCondition(
           column_id: columnId,
           operator: "<=",
           value: filter.max.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       return conditions;
     }
     case "time": {
-      const conditions: ConditionType[] = [];
+      const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
         conditions.push({
           column_id: columnId,
           operator: ">=",
           value: filter.min.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       if (filter.max !== undefined) {
@@ -173,24 +198,34 @@ export function filterToFilterCondition(
           column_id: columnId,
           operator: "<=",
           value: filter.max.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       return conditions;
     }
     case "boolean":
       if (filter.value) {
-        return {
-          column_id: columnId,
-          operator: "is_true",
-          value: undefined,
-        };
+        return [
+          {
+            column_id: columnId,
+            operator: "is_true",
+            value: undefined,
+            type: "condition",
+            negate: false,
+          },
+        ];
       }
       if (!filter.value) {
-        return {
-          column_id: columnId,
-          operator: "is_false",
-          value: undefined,
-        };
+        return [
+          {
+            column_id: columnId,
+            operator: "is_false",
+            value: undefined,
+            type: "condition",
+            negate: false,
+          },
+        ];
       }
 
       return [];
@@ -200,16 +235,35 @@ export function filterToFilterCondition(
         Logger.warn("Invalid operator for select filter", {
           operator: filter.operator,
         });
-        operator = "in"; // default to in operator
+        operator = "in";
       }
-      return {
-        column_id: columnId,
-        operator,
-        value: filter.options,
-      };
+      return [
+        {
+          column_id: columnId,
+          operator,
+          value: filter.options,
+          type: "condition",
+          negate: false,
+        },
+      ];
     }
 
     default:
       assertNever(filter);
   }
 }
+
+export function filtersToFilterGroup(
+  columnFilters: ColumnFiltersState,
+): FilterGroupType {
+  const conditions = columnFilters.flatMap((filter) =>
+    filterToFilterCondition(filter.id, filter.value as ColumnFilterValue),
+  );
+  // To maintain existing behavior "and" all the conditions
+  return {
+    type: "group",
+    operator: "and",
+    children: conditions,
+    negate: false,
+  };
+}