@marimo-team/frontend 0.23.2-dev8 → 0.23.2

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

@@ -3,9 +3,11 @@
 import type { Table } from "@tanstack/react-table";
 import { describe, expect, it } from "vitest";
 import {
+  detectSentinel,
   getClipboardContent,
   getPageIndexForRow,
   getRawValue,
+  splitLeadingTrailingWhitespace,
   stringifyUnknownValue,
 } from "../utils";
 
@@ -186,6 +188,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: {
@@ -214,3 +343,101 @@ describe("getRawValue", () => {
     expect(getRawValue(table, 5, "a")).toBeUndefined();
   });
 });
+
+describe("splitLeadingTrailingWhitespace", () => {
+  it("returns all empty for empty string", () => {
+    expect(splitLeadingTrailingWhitespace("")).toEqual({
+      leading: "",
+      middle: "",
+      trailing: "",
+    });
+  });
+
+  it("returns value as middle when no edge whitespace", () => {
+    expect(splitLeadingTrailingWhitespace("abc")).toEqual({
+      leading: "",
+      middle: "abc",
+      trailing: "",
+    });
+  });
+
+  it("preserves inner whitespace in middle", () => {
+    expect(splitLeadingTrailingWhitespace("abc d ef")).toEqual({
+      leading: "",
+      middle: "abc d ef",
+      trailing: "",
+    });
+  });
+
+  it("splits leading whitespace only", () => {
+    expect(splitLeadingTrailingWhitespace("   abc")).toEqual({
+      leading: "   ",
+      middle: "abc",
+      trailing: "",
+    });
+  });
+
+  it("splits trailing whitespace only", () => {
+    expect(splitLeadingTrailingWhitespace("abc   ")).toEqual({
+      leading: "",
+      middle: "abc",
+      trailing: "   ",
+    });
+  });
+
+  it("splits both leading and trailing whitespace", () => {
+    expect(splitLeadingTrailingWhitespace("  abc  ")).toEqual({
+      leading: "  ",
+      middle: "abc",
+      trailing: "  ",
+    });
+  });
+
+  it("handles mixed whitespace types at edges", () => {
+    expect(splitLeadingTrailingWhitespace("\t\n abc \r\t")).toEqual({
+      leading: "\t\n ",
+      middle: "abc",
+      trailing: " \r\t",
+    });
+  });
+
+  it("preserves inner whitespace when edges have whitespace", () => {
+    expect(splitLeadingTrailingWhitespace("  a b c  ")).toEqual({
+      leading: "  ",
+      middle: "a b c",
+      trailing: "  ",
+    });
+  });
+
+  it("handles Unicode whitespace (NBSP) at edges", () => {
+    expect(splitLeadingTrailingWhitespace("\u00a0abc\u00a0")).toEqual({
+      leading: "\u00a0",
+      middle: "abc",
+      trailing: "\u00a0",
+    });
+  });
+
+  it("puts whitespace-only string in leading (caller should handle sentinel first)", () => {
+    expect(splitLeadingTrailingWhitespace("   ")).toEqual({
+      leading: "   ",
+      middle: "",
+      trailing: "",
+    });
+  });
+
+  it("handles single whitespace char", () => {
+    expect(splitLeadingTrailingWhitespace(" ")).toEqual({
+      leading: " ",
+      middle: "",
+      trailing: "",
+    });
+  });
+
+  it("handles single non-whitespace char", () => {
+    expect(splitLeadingTrailingWhitespace("a")).toEqual({
+      leading: "",
+      middle: "a",
+      trailing: "",
+    });
+  });
+});

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/column-summary/chart-spec-model.tsx

@@ -41,7 +41,7 @@ export class ColumnChartSpecModel<T> {
 
   public static readonly EMPTY = new ColumnChartSpecModel(
     [],
-    {},
+    new Map(),
     {},
     {},
     {},
@@ -97,7 +97,7 @@ export class ColumnChartSpecModel<T> {
   public getHeaderSummary(column: string) {
     return {
       stats: this.columnStats.get(column),
-      type: this.fieldTypes[column],
+      type: this.fieldTypes.get(column),
       spec: this.opts.includeCharts ? this.getVegaSpec(column) : undefined,
     };
   }
@@ -141,7 +141,10 @@ export class ColumnChartSpecModel<T> {
     }
 
     const base = this.createBase(data);
-    const type = this.fieldTypes[column];
+    const type = this.fieldTypes.get(column);
+    if (type === undefined) {
+      return null;
+    }
 
     // https://github.com/vega/altair/blob/32990a597af7c09586904f40b3f5e6787f752fa5/doc/user_guide/encodings/index.rst#escaping-special-characters-in-column-names
     // escape periods in column names

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

@@ -75,7 +75,7 @@ export const TableColumnSummary = <TData, TValue>({
   };
 
   const renderStats = () => {
-    if (!stats) {
+    if (!stats || type === undefined) {
       return null;
     }
 

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

@@ -37,7 +37,10 @@ import {
   extractTimezone,
   type FieldTypesWithExternalType,
   INDEX_COLUMN_NAME,
+  isNumericType,
 } from "./types";
+import { SentinelCell, WhitespaceMarkers } from "./sentinel-cell";
+import { detectSentinel, splitLeadingTrailingWhitespace } 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,
@@ -343,6 +346,7 @@ const PopoutColumn = ({
   cellStyles,
   selectCell,
   rawStringValue,
+  edges,
   contentClassName,
   buttonText,
   wrapped,
@@ -351,11 +355,25 @@ const PopoutColumn = ({
   cellStyles?: string;
   selectCell?: () => void;
   rawStringValue: string;
+  // Edge whitespace shown as visible markers in the trigger; copy/title
+  // still use `rawStringValue`. Middle is sliced from `rawStringValue`.
+  edges?: { leading: string; trailing: string };
   contentClassName?: string;
   buttonText?: string;
   wrapped?: boolean;
   children: React.ReactNode;
 }) => {
+  const hasEdgeWhitespace =
+    edges !== undefined &&
+    (edges.leading.length > 0 || edges.trailing.length > 0);
+
+  const displayText = hasEdgeWhitespace
+    ? rawStringValue.slice(
+        edges.leading.length,
+        rawStringValue.length - edges.trailing.length,
+      )
+    : rawStringValue;
+
   return (
     <EmotionCacheProvider container={null}>
       <Popover>
@@ -374,7 +392,9 @@ const PopoutColumn = ({
             )}
             title={rawStringValue}
           >
-            {rawStringValue}
+            {edges ? <WhitespaceMarkers value={edges.leading} /> : null}
+            {displayText}
+            {edges ? <WhitespaceMarkers value={edges.trailing} /> : null}
           </span>
         </PopoverTrigger>
         <PopoverContent
@@ -522,6 +542,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)) {
@@ -568,7 +599,13 @@ export function renderCellValue<TData, TValue>({
       ? String(column.applyColumnFormatting(value))
       : String(renderValue());
 
-    const parts = parseContent(stringValue);
+    const { leading, middle, trailing } =
+      splitLeadingTrailingWhitespace(stringValue);
+    const hasEdgeWhitespace = leading.length > 0 || trailing.length > 0;
+
+    // Parse only the inner content for URL detection so URLDetector doesn't
+    // split on the whitespace padding.
+    const parts = parseContent(hasEdgeWhitespace ? middle : stringValue);
     const allMarkup = parts.every((part) => part.type !== "text");
     if (allMarkup || stringValue.length < MAX_STRING_LENGTH || isWrapped) {
       return (
@@ -576,7 +613,9 @@ export function renderCellValue<TData, TValue>({
           onClick={selectCell}
           className={cn(cellStyles, isWrapped && COLUMN_WRAPPING_STYLES)}
         >
+          <WhitespaceMarkers value={leading} />
           <UrlDetector parts={parts} />
+          <WhitespaceMarkers value={trailing} />
         </div>
       );
     }
@@ -586,11 +625,15 @@ export function renderCellValue<TData, TValue>({
         cellStyles={cellStyles}
         selectCell={selectCell}
         rawStringValue={stringValue}
+        edges={{ leading, trailing }}
         contentClassName="max-h-64 overflow-auto whitespace-pre-wrap break-words text-sm w-96"
         buttonText="X"
         wrapped={isWrapped}
       >
-        <MarkdownUrlDetector content={stringValue} parts={parts} />
+        <MarkdownUrlDetector
+          content={stringValue}
+          parts={parseContent(stringValue)}
+        />
       </PopoutColumn>
     );
   }

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