FixDataframe performance when rendering many datetime rows (#13305)

* fix perf

* fix

* fix changeset

Author: pngwn

.changeset/fix-dataframe-sizing-row-perf.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": patch
+"gradio": patch
+---
+
+fix:Dataframe: fix extreme rendering slowdown with `datatype="date"` (and any future dtype with asymmetric string casts) by firing `EditableCell`'s shim-blur only on edit teardown instead of every render. Also makes the hidden sizing-row computation faster by avoiding Date rendering for every entry.

demo/dataframe_datetime_long/run.py

@@ -0,0 +1,78 @@
+import random
+
+import gradio as gr
+
+ROWS = 5000
+rng = random.Random(42)
+
+headers = [
+    "date",
+    "str_short",
+    "str_long",
+    "num",
+    "bool",
+    "markdown",
+    "html",
+]
+datatype = ["date", "str", "str", "number", "bool", "markdown", "html"]
+
+WORDS = [
+    "alpha", "beta", "gamma", "delta", "epsilon", "zeta", "eta", "theta",
+    "iota", "kappa", "lambda", "mu", "nu", "xi", "omicron", "pi",
+]
+
+MD_WRAPPERS = [
+    lambda s: f"**{s}**",
+    lambda s: f"*{s}*",
+    lambda s: f"`{s}`",
+    lambda s: f"[{s}](https://example.com)",
+    lambda s: f"# {s}",
+    lambda s: s,
+]
+
+HTML_WRAPPERS = [
+    lambda s: f"<b>{s}</b>",
+    lambda s: f"<i>{s}</i>",
+    lambda s: f'<span style="color: tomato">{s}</span>',
+    lambda s: f'<a href="https://example.com" target="_blank">{s}</a>',
+    lambda s: f"<code>{s}</code>",
+    lambda s: s,
+]
+
+
+def random_text(min_words: int, max_words: int) -> str:
+    n = rng.randint(min_words, max_words)
+    return " ".join(rng.choice(WORDS) for _ in range(n))
+
+
+def random_md() -> str:
+    return rng.choice(MD_WRAPPERS)(random_text(1, 8))
+
+
+def random_html() -> str:
+    return rng.choice(HTML_WRAPPERS)(random_text(1, 8))
+
+
+data = [
+    [
+        f"2026-01-{(i % 28) + 1:02d}",
+        rng.choice(WORDS),
+        random_text(2, 6),
+        round(rng.random() * 1000, 2),
+        rng.random() > 0.5,
+        random_md(),
+        random_html(),
+    ]
+    for i in range(ROWS)
+]
+
+with gr.Blocks() as demo:
+    gr.Markdown(
+        f"### Reproduction for #13279: {ROWS} rows × mixed dtypes (markdown/html/date/number/bool/str)"
+    )
+    gr.Dataframe(
+        value=data, headers=headers, datatype=datatype, interactive=False
+    )
+
+if __name__ == "__main__":
+    demo.launch()

js/dataframe/shared/EditableCell.svelte

@@ -136,10 +136,12 @@
 		handle_blur({ target: { value } } as unknown as FocusEvent);
 	}
 
+	// returning cleanup from the effect fires the blur only when leaving edit mode, not on every render
 	$effect(() => {
-		if (!edit) {
-			// Shim blur on removal for Safari and Firefox
-			handle_blur({ target: { value } } as unknown as FocusEvent);
+		if (edit) {
+			return () => {
+				handle_blur({ target: { value } } as unknown as FocusEvent);
+			};
 		}
 	});
 </script>

js/dataframe/shared/Table.svelte

@@ -13,6 +13,7 @@
 	import { tick, onMount } from "svelte";
 	import { Upload } from "@gradio/upload";
 
+	import { MarkdownCode } from "@gradio/markdown-code";
 	import HeaderCell from "./HeaderCell.svelte";
 	import DataCell from "./DataCell.svelte";
 	import EmptyRowButton from "./EmptyRowButton.svelte";
@@ -263,6 +264,82 @@
 		return Array.isArray(datatype) ? (datatype[col] ?? "str") : datatype;
 	}
 
+	type SizingEntry = { val: string; col_idx: number; dtype: Datatype };
+
+	// heading multipliers for markdown/html block elements that render
+	// at a larger font size than body text.
+	const HEADING_MULT = [2.2, 1.7, 1.4, 1.2, 1.1, 1.05];
+
+	function md_visual_length(s: string): number {
+		const heading = s.match(/^\s*(#{1,6})\s+(.+)/);
+		if (heading) {
+			const lvl = heading[1].length;
+			const text = heading[2].replace(/[*_`[\]()]/g, "");
+			return text.length * HEADING_MULT[lvl - 1];
+		}
+		return s.replace(/[*_`#[\]()]/g, "").length;
+	}
+
+	function html_visual_length(s: string): number {
+		const stripped = s.replace(/<[^>]+>/g, "").length;
+		const h = s.match(/<h([1-6])\b/i);
+		if (h) return stripped * HEADING_MULT[parseInt(h[1]) - 1];
+		return stripped;
+	}
+
+	// mirror EditableCell.truncate_text so the sizing row reserves width
+	// for the truncated ("…") string, not the full source
+	function apply_truncation(s: string, dtype: Datatype): string {
+		if (
+			max_chars &&
+			max_chars > 0 &&
+			dtype !== "image" &&
+			s.length > max_chars
+		) {
+			return s.slice(0, max_chars) + "...";
+		}
+		return s;
+	}
+
+	// find the widest rendered value per visible column for the sizing row
+	function compute_sizing_row(): SizingEntry[] {
+		const headers = header_groups[0]?.headers ?? [];
+		return headers.map((header) => {
+			const col_idx = (header.column.columnDef.meta as any)?.colIndex ?? 0;
+			const dtype = get_dtype(col_idx);
+			const accessor = `col_${col_idx}`;
+
+			if (dtype === "bool") {
+				return { val: "false", col_idx, dtype };
+			}
+
+			const visual_len =
+				dtype === "markdown"
+					? md_visual_length
+					: dtype === "html"
+						? html_visual_length
+						: (s: string) => s.length;
+
+			let best = "";
+			let best_len = -1;
+			for (const r of rows) {
+				const row_idx = r.original._index;
+				const rendered = editable
+					? r.original[accessor]
+					: (display_value?.[row_idx]?.[col_idx] ??
+						values?.[row_idx]?.[col_idx]);
+				if (rendered == null) continue;
+				const v = apply_truncation(String(rendered), dtype);
+				const len = visual_len(v);
+				if (len > best_len) {
+					best_len = len;
+					best = v;
+				}
+			}
+			return { val: best, col_idx, dtype };
+		});
+	}
+
 	function get_display_value(row: number, col: number): string {
 		if (display_value?.[row]?.[col] !== undefined)
 			return display_value[row][col];
@@ -932,33 +1009,26 @@
 
 					<tbody class="sizing-body" aria-hidden="true">
 						{#if rows.length > 0}
-							{@const sizing_row = rows.reduce((widest, row) => {
-								const cells = row.getVisibleCells();
-								cells.forEach((cell, i) => {
-									let val = String(cell.getValue() ?? "");
-									if (
-										max_chars &&
-										max_chars > 0 &&
-										val.length > max_chars &&
-										get_dtype(i) !== "image"
-									) {
-										val = val.slice(0, max_chars) + "...";
-									}
-									if (!widest[i] || val.length > widest[i].length) {
-										widest[i] = val;
-									}
-								});
-								return widest;
-							}, [] as string[])}
+							{@const sizing_row = compute_sizing_row()}
 							<tr>
 								{#if show_row_numbers}
 									<td class="row-number-cell">{rows.length}</td>
 								{/if}
-								{#each sizing_row as val, ci}
-									{@const dtype = get_dtype(ci)}
+								{#each sizing_row as entry (entry.col_idx)}
 									<td
 										><div class="cell-wrap">
-											{#if dtype === "html" || dtype === "markdown"}{@html val}{:else}{val}{/if}
+											{#if entry.dtype === "markdown"}
+												<MarkdownCode
+													message={entry.val}
+													{latex_delimiters}
+													{line_breaks}
+													chatbot={false}
+												/>
+											{:else if entry.dtype === "html"}
+												{@html entry.val}
+											{:else}
+												{entry.val}
+											{/if}
 										</div></td
 									>
 								{/each}