@marimo-team/frontend 0.23.2-dev65 → 0.23.2-dev68

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

@@ -2,7 +2,7 @@
 
 import { render } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { SentinelCell } from "../sentinel-cell";
+import { SentinelCell, WhitespaceMarkers } from "../sentinel-cell";
 import type { CellValueSentinel } from "../types";
 
 function renderSentinel(sentinel: CellValueSentinel) {
@@ -10,6 +10,10 @@ function renderSentinel(sentinel: CellValueSentinel) {
   return container.querySelector("span")!;
 }
 
+function renderMarkers(value: string) {
+  return render(<WhitespaceMarkers value={value} />);
+}
+
 describe("SentinelCell", () => {
   it("renders null as None", () => {
     const span = renderSentinel({ type: "null", value: null });
@@ -81,3 +85,87 @@ describe("SentinelCell", () => {
     expect(span.getAttribute("title")).toBe("NaT (Not a Time)");
   });
 });
+
+describe("WhitespaceMarkers", () => {
+  it("renders nothing for empty string", () => {
+    const { container } = renderMarkers("");
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders a single space as open box", () => {
+    const { container } = renderMarkers(" ");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\u2423");
+    expect(outer.getAttribute("aria-label")).toBe("1 space");
+  });
+
+  it("renders multiple spaces as multiple open boxes", () => {
+    const { container } = renderMarkers("   ");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\u2423\u2423\u2423");
+    expect(outer.getAttribute("aria-label")).toBe("3 spaces");
+  });
+
+  it("renders tab, newline, CR with escape labels", () => {
+    const { container } = renderMarkers("\t\n\r");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\\t\\n\\r");
+  });
+
+  it("renders each char in its own span for CSS spacing", () => {
+    const { container } = renderMarkers("   ");
+    const outer = container.querySelector("span")!;
+    // Outer wrapper + three inner spans (one per char)
+    expect(outer.querySelectorAll("span")).toHaveLength(3);
+  });
+
+  it("renders unknown whitespace (NBSP) as \\uXXXX escape", () => {
+    const { container } = renderMarkers("\u00a0");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\\u00a0");
+  });
+
+  it("renders BOM as \\ufeff", () => {
+    const { container } = renderMarkers("\ufeff");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\\ufeff");
+  });
+
+  it("renders en space and em space as escapes", () => {
+    const { container } = renderMarkers("\u2002\u2003");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\\u2002\\u2003");
+  });
+
+  it("mixes known glyphs and unknown escapes correctly", () => {
+    const { container } = renderMarkers(" \t\u00a0");
+    const outer = container.querySelector("span")!;
+    expect(outer.textContent).toBe("\u2423\\t\\u00a0");
+  });
+
+  it("describes mixed whitespace in aria-label", () => {
+    const { container } = renderMarkers(" \t\n");
+    const outer = container.querySelector("span")!;
+    expect(outer.getAttribute("aria-label")).toBe("1 space, 1 tab, 1 newline");
+  });
+
+  it("describes unknown whitespace as 'unicode whitespace'", () => {
+    const { container } = renderMarkers("\u00a0");
+    const outer = container.querySelector("span")!;
+    expect(outer.getAttribute("aria-label")).toBe("1 unicode whitespace");
+  });
+
+  it("pluralizes unknown whitespace in aria-label", () => {
+    const { container } = renderMarkers("\u00a0\u00a0\u2002");
+    const outer = container.querySelector("span")!;
+    expect(outer.getAttribute("aria-label")).toBe("3 unicode whitespaces");
+  });
+
+  it("mixes known and unknown whitespace labels", () => {
+    const { container } = renderMarkers(" \u00a0\t");
+    const outer = container.querySelector("span")!;
+    expect(outer.getAttribute("aria-label")).toBe(
+      "1 space, 1 unicode whitespace, 1 tab",
+    );
+  });
+});

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

@@ -7,6 +7,7 @@ import {
   getClipboardContent,
   getPageIndexForRow,
   getRawValue,
+  splitLeadingTrailingWhitespace,
   stringifyUnknownValue,
 } from "../utils";
 
@@ -342,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/columns.tsx

@@ -39,8 +39,8 @@ import {
   INDEX_COLUMN_NAME,
   isNumericType,
 } from "./types";
-import { SentinelCell } from "./sentinel-cell";
-import { detectSentinel } from "./utils";
+import { SentinelCell, WhitespaceMarkers } from "./sentinel-cell";
+import { detectSentinel, splitLeadingTrailingWhitespace } from "./utils";
 import { uniformSample } from "./uniformSample";
 import { MarkdownUrlDetector, UrlDetector } from "./url-detector";
 
@@ -346,6 +346,7 @@ const PopoutColumn = ({
   cellStyles,
   selectCell,
   rawStringValue,
+  edges,
   contentClassName,
   buttonText,
   wrapped,
@@ -354,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>
@@ -377,7 +392,9 @@ const PopoutColumn = ({
             )}
             title={rawStringValue}
           >
-            {rawStringValue}
+            {edges ? <WhitespaceMarkers value={edges.leading} /> : null}
+            {displayText}
+            {edges ? <WhitespaceMarkers value={edges.trailing} /> : null}
           </span>
         </PopoverTrigger>
         <PopoverContent
@@ -582,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 (
@@ -590,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>
       );
     }
@@ -600,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/sentinel-cell.tsx

@@ -3,20 +3,30 @@
 import type { CellValueSentinel, CellValueSentinelType } from "./types";
 
 const WHITESPACE_CHARS: Record<string, { marker: string; name: string }> = {
-  " ": { marker: "\u2423", name: "space" }, // open box (space symbol)
+  " ": { marker: "\u2423", name: "space" },
   "\t": { marker: "\\t", name: "tab" },
   "\n": { marker: "\\n", name: "newline" },
-  "\r": { marker: "\\r", name: "newline" },
+  "\r": { marker: "\\r", name: "carriage return" },
 };
 
-function renderWhitespaceMarkers(str: string): string {
-  return [...str].map((ch) => WHITESPACE_CHARS[ch]?.marker ?? ch).join("");
+function renderWhitespaceMarkers(str: string): React.ReactNode[] {
+  return [...str].map((ch, i) => {
+    const entry = WHITESPACE_CHARS[ch];
+    const marker = entry
+      ? entry.marker
+      : `\\u${(ch.codePointAt(0) ?? 0).toString(16).padStart(4, "0")}`;
+    return (
+      <span key={i} className="mr-0.5 last:mr-0">
+        {marker}
+      </span>
+    );
+  });
 }
 
 function describeWhitespace(str: string): string {
   const counts: Record<string, number> = {};
   for (const ch of str) {
-    const name = WHITESPACE_CHARS[ch]?.name ?? "character";
+    const name = WHITESPACE_CHARS[ch]?.name ?? "unicode whitespace";
     counts[name] = (counts[name] ?? 0) + 1;
   }
   return Object.entries(counts)
@@ -25,7 +35,7 @@ function describeWhitespace(str: string): string {
 }
 
 interface SentinelConfig {
-  label: (value: CellValueSentinel["value"]) => string;
+  label: (value: CellValueSentinel["value"]) => string | React.ReactNode[];
   tooltip: (value: CellValueSentinel["value"]) => string;
   ariaLabel: (value: CellValueSentinel["value"]) => string;
 }
@@ -68,6 +78,24 @@ const SENTINEL_CONFIG: Record<CellValueSentinelType, SentinelConfig> = {
   },
 };
 
+export function WhitespaceMarkers({ value }: { value: string }) {
+  if (!value) {
+    return null;
+  }
+
+  const description = describeWhitespace(value);
+
+  return (
+    <span
+      className="text-muted-foreground opacity-60"
+      aria-label={description}
+      title={description}
+    >
+      {renderWhitespaceMarkers(value)}
+    </span>
+  );
+}
+
 export function SentinelCell({
   sentinel,
 }: {

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

@@ -14,6 +14,51 @@ import {
 } from "./types";
 
 const WHITESPACE_ONLY_RE = /^[\s]+$/;
+const WHITESPACE_CHAR_RE = /\s/;
+const EDGE_WHITESPACE_RE = /^(\s*)([\s\S]*?)(\s*)$/;
+
+/**
+ * checks for leading and trailing whitespaces.
+ * Will run for every cell, so fast exits for common cases
+ *
+ * @param value - to split
+ * @returns - leading, middle, and trailing string where leading and trailing are whitespace string
+ */
+export function splitLeadingTrailingWhitespace(value: string): {
+  leading: string;
+  middle: string;
+  trailing: string;
+} {
+  const parts = {
+    leading: "",
+    middle: "",
+    trailing: "",
+  };
+  if (value.length === 0) {
+    return parts;
+  }
+
+  const firstWhitespaceCh = WHITESPACE_CHAR_RE.test(value[0]);
+  const lastWhitespaceCh = WHITESPACE_CHAR_RE.test(value[value.length - 1]);
+
+  // if does not start or end with ws
+  if (!firstWhitespaceCh && !lastWhitespaceCh) {
+    parts.middle = value;
+    return parts;
+  }
+
+  const match = EDGE_WHITESPACE_RE.exec(value);
+  if (!match) {
+    parts.middle = value;
+    return parts;
+  }
+
+  parts.leading = match[1] ?? "";
+  parts.middle = match[2] ?? "";
+  parts.trailing = match[3] ?? "";
+
+  return parts;
+}
 
 /**
  * Convenience function to load table data.