@gradio/dataframe 0.23.0 → 0.23.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @gradio/dataframe
 
+## 0.23.2
+
+### Fixes
+
+- [#13250](https://github.com/gradio-app/gradio/pull/13250) [`2e9eb51`](https://github.com/gradio-app/gradio/commit/2e9eb51d4da5e4a997ac2fc18e5814bacf6f818d) - Restore select-all checkbox in boolean column headers of `gr.Dataframe`.  Thanks @pngwn!
+- [#13259](https://github.com/gradio-app/gradio/pull/13259) [`b5e6491`](https://github.com/gradio-app/gradio/commit/b5e64918b721550bc3762169fda81c5270904eaa) - Dataframe: allow native context menu and text selection on static cells.  Thanks @pngwn!
+- [#13305](https://github.com/gradio-app/gradio/pull/13305) [`1d5994d`](https://github.com/gradio-app/gradio/commit/1d5994da102bd9bf2367f58789de508b1727b1bf) - 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.  Thanks @pngwn!
+- [#13303](https://github.com/gradio-app/gradio/pull/13303) [`79c5776`](https://github.com/gradio-app/gradio/commit/79c577680978adfb5eeaa01944635e14dc67e5f1) - Rework `Dataframe` wrapping, truncation, and column width sizing.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.24.0
+- @gradio/statustracker@0.14.1
+- @gradio/checkbox@0.7.0
+- @gradio/upload@0.17.9
+
+## 0.23.1
+
+### Dependency updates
+
+- @gradio/atoms@0.23.1
+- @gradio/statustracker@0.14.0
+- @gradio/client@2.2.0
+- @gradio/markdown-code@0.7.0
+- @gradio/checkbox@0.6.7
+
 ## 0.23.0
 
 ### Features

package/Dataframe.test.ts

@@ -1,5 +1,11 @@
 import { test, describe, afterEach, expect } from "vitest";
-import { cleanup, render, fireEvent } from "@self/tootils/render";
+import {
+	cleanup,
+	render,
+	fireEvent,
+	waitFor,
+	within
+} from "@self/tootils/render";
 import { tick } from "svelte";
 
 import Dataframe from "./Index.svelte";
@@ -284,6 +290,85 @@ describe("Cell selection", () => {
 		expect(get_cell(container, 1, 0)!.className).toContain("cell-selected");
 		expect(get_cell(container, 1, 1)!.className).toContain("cell-selected");
 	});
+
+	// Regression: pressing Ctrl between mousedown and mouseup must not call
+	// handle_cell_click a second time via the click event.  If it did, the
+	// Ctrl+click path would toggle the already-selected cell back off,
+	// producing conflicting state updates that froze the interface.
+	test("pressing Ctrl between mousedown and mouseup keeps cell selected", async () => {
+		const { container } = await render(Dataframe, default_props);
+		await wait();
+
+		const cell = get_cell(container, 0, 0)!;
+
+		// mousedown (no ctrl) selects the cell
+		await fireEvent.mouseDown(cell);
+		await wait();
+		expect(cell.className).toContain("cell-selected");
+
+		// The browser fires a click event when the user releases the mouse button.
+		// If the user pressed Ctrl before releasing, that click carries ctrlKey:true.
+		// A second call to handle_cell_click with ctrlKey would toggle the cell
+		// back off (deselect it).  Verify that the click event has no effect.
+		await fireEvent.click(cell, { ctrlKey: true });
+		await wait();
+
+		expect(cell.className).toContain("cell-selected");
+	});
+});
+
+describe("Header overflow", () => {
+	let wrapper: HTMLDivElement;
+
+	afterEach(async () => {
+		cleanup();
+		wrapper?.remove();
+	});
+
+	// Headers must expand to fit their text (no ellipsis truncation).
+	// When headers are wider than the scroll container, later columns are
+	// hidden by the container's overflow — not by cutting off the text.
+	test("long headers are not truncated in the DOM and the 3rd header is hidden by scroll overflow", async () => {
+		// Narrow container makes overflow predictable regardless of viewport size.
+		wrapper = document.createElement("div");
+		wrapper.style.width = "300px";
+		document.body.appendChild(wrapper);
+
+		// Capital W is one of the widest glyphs — 60 of them easily exceeds 300 px.
+		const long_header = "W".repeat(60);
+
+		const { getAllByRole } = await render(
+			Dataframe,
+			{
+				...default_props,
+				value: {
+					data: [["a", "b", "c"]],
+					headers: [long_header + " A", long_header + " B", long_header + " C"],
+					metadata: null
+				},
+				col_count: [3, "fixed"] as [number, "fixed" | "dynamic"],
+				row_count: [1, "fixed"] as [number, "fixed" | "dynamic"]
+			},
+			{ container: wrapper }
+		);
+
+		await wait();
+
+		const headers = getAllByRole("columnheader");
+		expect(headers).toHaveLength(3);
+
+		// Full text must be present in the DOM — no in-cell truncation.
+		expect(headers[2].textContent?.trim()).toContain(long_header + " C");
+
+		// The 3rd header's left edge must be beyond the scroll container's right
+		// edge, meaning it is completely outside the visible area.
+		const viewport = wrapper.querySelector(
+			".virtual-table-viewport"
+		) as HTMLElement;
+		const viewport_rect = viewport.getBoundingClientRect();
+		const third_rect = headers[2].getBoundingClientRect();
+		expect(third_rect.left).toBeGreaterThanOrEqual(viewport_rect.right);
+	});
 });
 
 describe("Sorting", () => {
@@ -500,6 +585,67 @@ describe("Add/remove rows and columns", () => {
 	});
 });
 
+describe("Cell menu visibility on static cells", () => {
+	afterEach(() => cleanup());
+
+	test("context menu does not open on a static column cell", async () => {
+		const { container } = await render(Dataframe, {
+			...default_props,
+			static_columns: [0]
+		});
+		await wait();
+
+		const cell = get_cell(container, 0, 0)!;
+		await fireEvent.contextMenu(cell);
+		await wait();
+
+		expect(within(document.body).queryByRole("menu")).toBeNull();
+	});
+
+	test("context menu does not open when interactive is false", async () => {
+		const { container } = await render(Dataframe, {
+			...default_props,
+			interactive: false,
+			editable: false
+		});
+		await wait();
+
+		const cell = get_cell(container, 0, 0)!;
+		await fireEvent.contextMenu(cell);
+		await wait();
+
+		expect(within(document.body).queryByRole("menu")).toBeNull();
+	});
+
+	test("context menu does open on an editable, non-static cell", async () => {
+		const { container } = await render(Dataframe, {
+			...default_props,
+			row_count: [3, "dynamic"] as [number, "fixed" | "dynamic"]
+		});
+		await wait();
+
+		const cell = get_cell(container, 0, 0)!;
+		await fireEvent.contextMenu(cell);
+		await wait();
+
+		expect(within(document.body).queryByRole("menu")).not.toBeNull();
+	});
+
+	test("cell menu button does not render on a static column cell", async () => {
+		const { container } = await render(Dataframe, {
+			...default_props,
+			static_columns: [0]
+		});
+		await wait();
+
+		const cell = get_cell(container, 0, 0)!;
+		await fireEvent.mouseDown(cell);
+		await wait();
+
+		expect(cell.querySelector(".cell-menu-button")).toBeNull();
+	});
+});
+
 describe("Delete/clear cells", () => {
 	afterEach(() => cleanup());
 
@@ -701,9 +847,175 @@ describe("Copy", () => {
 
 		const table_wrap = get_table_wrap(container)!;
 		await fireEvent.keyDown(table_wrap, { key: "c", metaKey: true });
-		await wait(100);
 
-		const clipboard = await navigator.clipboard.readText();
-		expect(clipboard).toBe("Alice");
+		// handle_copy() is async but called without await in the keydown handler,
+		// so the clipboard write may not be complete immediately. Poll until it settles.
+		await waitFor(async () => {
+			expect(await navigator.clipboard.readText()).toBe("Alice");
+		});
+	});
+});
+
+describe("Boolean column select-all header checkbox", () => {
+	afterEach(() => cleanup());
+
+	const bool_props = {
+		...default_props,
+		value: {
+			data: [
+				["Alice", true, false],
+				["Bob", false, false],
+				["Carol", true, false]
+			],
+			headers: ["Name", "Active", "Admin"],
+			metadata: null
+		},
+		datatype: ["str", "bool", "bool"] as any,
+		col_count: [3, "fixed"] as [number, "fixed" | "dynamic"]
+	};
+
+	function get_header(container: HTMLElement, col_idx: number): HTMLElement {
+		return container.querySelector<HTMLElement>(
+			`th[data-heading='${col_idx}']`
+		)!;
+	}
+
+	function get_header_checkbox(
+		container: HTMLElement,
+		col_idx: number
+	): HTMLInputElement {
+		return within(get_header(container, col_idx)).getByTestId(
+			"checkbox"
+		) as HTMLInputElement;
+	}
+
+	test("renders checkbox in bool column header (interactive mode)", async () => {
+		const { container } = await render(Dataframe, bool_props);
+		await wait();
+
+		expect(get_header_checkbox(container, 1)).toBeInTheDocument();
+		expect(get_header_checkbox(container, 2)).toBeInTheDocument();
+
+		expect(
+			within(get_header(container, 0)).queryByTestId("checkbox")
+		).not.toBeInTheDocument();
+	});
+
+	test("does not render checkbox when not interactive", async () => {
+		const { container } = await render(Dataframe, {
+			...bool_props,
+			interactive: false
+		});
+		await wait();
+
+		expect(
+			within(get_header(container, 1)).queryByTestId("checkbox")
+		).not.toBeInTheDocument();
+	});
+
+	test("header checkbox reflects indeterminate state for mixed column", async () => {
+		const { container } = await render(Dataframe, bool_props);
+		await wait();
+
+		const active = get_header_checkbox(container, 1);
+		expect(active.indeterminate).toBe(true);
+		expect(active.checked).toBe(false);
+	});
+
+	test("header checkbox is checked when all column values are true", async () => {
+		const { container } = await render(Dataframe, {
+			...bool_props,
+			value: {
+				data: [
+					["Alice", true],
+					["Bob", true]
+				],
+				headers: ["Name", "Active"],
+				metadata: null
+			},
+			datatype: ["str", "bool"] as any,
+			col_count: [2, "fixed"] as [number, "fixed" | "dynamic"]
+		});
+		await wait();
+
+		const active = get_header_checkbox(container, 1);
+		expect(active.checked).toBe(true);
+		expect(active.indeterminate).toBe(false);
+	});
+
+	test("clicking indeterminate header checkbox sets all column cells to true", async () => {
+		const { container, listen } = await render(Dataframe, bool_props);
+		await wait();
+
+		const change = listen("change");
+		await fireEvent.click(get_header_checkbox(container, 1));
+		await wait();
+
+		const data = change.mock.calls.at(-1)?.[0].data;
+		expect(data).toEqual([
+			["Alice", true, false],
+			["Bob", true, false],
+			["Carol", true, false]
+		]);
+
+		const updated = get_header_checkbox(container, 1);
+		expect(updated.checked).toBe(true);
+		expect(updated.indeterminate).toBe(false);
+	});
+
+	test("clicking fully-checked header checkbox sets all column cells to false", async () => {
+		const { container, listen } = await render(Dataframe, {
+			...bool_props,
+			value: {
+				data: [
+					["Alice", true, false],
+					["Bob", true, false]
+				],
+				headers: ["Name", "Active", "Admin"],
+				metadata: null
+			}
+		});
+		await wait();
+
+		const change = listen("change");
+		await fireEvent.click(get_header_checkbox(container, 1));
+		await wait();
+
+		const data = change.mock.calls.at(-1)?.[0].data;
+		expect(data).toEqual([
+			["Alice", false, false],
+			["Bob", false, false]
+		]);
+	});
+
+	test("toggling one bool header does not affect cells in other bool columns", async () => {
+		const { container, listen } = await render(Dataframe, {
+			...bool_props,
+			value: {
+				data: [
+					["Alice", false, true],
+					["Bob", false, true],
+					["Carol", false, true]
+				],
+				headers: ["Name", "Active", "Admin"],
+				metadata: null
+			}
+		});
+		await wait();
+
+		const change = listen("change");
+		await fireEvent.click(get_header_checkbox(container, 1));
+		await wait();
+
+		const data = change.mock.calls.at(-1)?.[0].data;
+		expect(data).toEqual([
+			["Alice", true, true],
+			["Bob", true, true],
+			["Carol", true, true]
+		]);
+
+		const admin = get_header_checkbox(container, 2);
+		expect(admin.checked).toBe(true);
+		expect(admin.indeterminate).toBe(false);
 	});
 });

package/Index.svelte

@@ -83,7 +83,6 @@
 	min_width={gradio.shared.min_width}
 	padding={false}
 	container={false}
-	overflow_behavior="visible"
 	{fullscreen}
 >
 	<StatusTracker

package/dist/Index.svelte

@@ -83,7 +83,6 @@
 	min_width={gradio.shared.min_width}
 	padding={false}
 	container={false}
-	overflow_behavior="visible"
 	{fullscreen}
 >
 	<StatusTracker

package/dist/shared/BooleanCell.svelte

@@ -34,7 +34,6 @@
 		justify-content: center;
 		width: min-content;
 		height: var(--size-full);
-		margin: 0 auto;
 	}
 
 	.bool-cell :global(input:disabled) {

package/dist/shared/DataCell.svelte

@@ -20,6 +20,7 @@
 		show_menu_button = false,
 		show_selection_buttons = false,
 		is_first_column = false,
+		is_solo = false,
 		latex_delimiters,
 		line_breaks = true,
 		editable = true,
@@ -50,6 +51,7 @@
 		show_menu_button?: boolean;
 		show_selection_buttons?: boolean;
 		is_first_column?: boolean;
+		is_solo?: boolean;
 		latex_delimiters: { left: string; right: string; display: boolean }[];
 		line_breaks?: boolean;
 		editable?: boolean;
@@ -71,21 +73,38 @@
 	} = $props();
 
 	let is_selected = $derived(selection_classes !== "");
+
+	// lock the cell-wrap's height to its pre-selection value so the
+	// row doesn't shift when the span goes position: absolute.
+	let wrap_el: HTMLDivElement | undefined = $state();
+	let locked_height = $state("");
+
+	// pre is weird but runs _before_ DOM updates
+	$effect.pre(() => {
+		if (is_solo && wrap_el) {
+			locked_height = `height: ${wrap_el.offsetHeight}px;`;
+		} else {
+			locked_height = "";
+		}
+	});
 </script>
 
 <div
 	class="body-cell {selection_classes}"
 	class:flash={is_flash}
 	class:first-column={is_first_column}
+	class:static={is_static}
+	class:cell-solo={is_solo}
 	data-row={row_idx}
 	data-col={col_idx}
 	data-testid={`cell-${row_idx}-${col_idx}`}
+	tabindex={is_static ? -1 : undefined}
 	{onmousedown}
 	{ondblclick}
 	{oncontextmenu}
 	style="{col_style} {cell_style}"
 >
-	<div class="cell-wrap">
+	<div class="cell-wrap" bind:this={wrap_el} style={locked_height}>
 		<EditableCell
 			{value}
 			{display_value}
@@ -105,6 +124,7 @@
 			{on_select_row}
 			{is_dragging}
 			{wrap_text}
+			expanded={is_solo}
 		/>
 		{#if show_menu_button}
 			<CellMenuButton on_click={on_menu_click} />
@@ -120,8 +140,14 @@
 			inset 1px 0 0 var(--border-color-primary),
 			inset 0 0 0 1px var(--ring-color);
 		padding: 0;
-		overflow: visible;
+		overflow: hidden;
 		box-sizing: border-box;
+		user-select: none;
+		min-width: 0;
+	}
+
+	.body-cell.static {
+		user-select: text;
 	}
 
 	.body-cell.first-column {
@@ -145,6 +171,65 @@
 		position: relative;
 	}
 
+	.body-cell.cell-solo {
+		z-index: 10;
+		overflow: visible;
+	}
+
+	.body-cell.cell-solo .cell-wrap {
+		overflow: visible;
+	}
+
+	.body-cell.cell-solo :global(.cell-wrap > span) {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		min-height: 100%;
+		padding: var(--size-2);
+		box-sizing: border-box;
+		white-space: normal;
+		overflow: visible;
+		text-overflow: clip;
+		overflow-wrap: break-word;
+		word-break: break-word;
+		background: var(--background-fill-primary);
+		box-shadow:
+			inset 0 2px 0 0 var(--color-accent),
+			inset 0 -2px 0 0 var(--color-accent),
+			inset 2px 0 0 0 var(--color-accent),
+			inset -2px 0 0 0 var(--color-accent),
+			0 6px 12px -4px rgba(0, 0, 0, 0.22);
+		z-index: 1;
+	}
+
+	.body-cell.cell-solo :global(.cell-wrap > textarea) {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		min-height: 100%;
+		padding: var(--size-2);
+		padding-left: var(--size-2);
+		margin: 0;
+		box-sizing: border-box;
+		transform: none;
+		background: var(--background-fill-primary);
+		box-shadow:
+			inset 0 2px 0 0 var(--color-accent),
+			inset 0 -2px 0 0 var(--color-accent),
+			inset 2px 0 0 0 var(--color-accent),
+			inset -2px 0 0 0 var(--color-accent),
+			0 6px 12px -4px rgba(0, 0, 0, 0.22);
+		z-index: 2;
+		field-sizing: content;
+		height: auto;
+	}
+
+	.body-cell.cell-solo :global(.selection-button) {
+		z-index: 3;
+	}
+
 	.body-cell.cell-selected.no-top {
 		--sel-top: inset 0 0 0 0 transparent;
 	}
@@ -182,7 +267,7 @@
 		padding: var(--size-2);
 		box-sizing: border-box;
 		gap: var(--size-1);
-		overflow: visible;
+		overflow: hidden;
 		min-width: 0;
 		height: 100%;
 	}

package/dist/shared/DataCell.svelte.d.ts

@@ -16,6 +16,7 @@ type $$ComponentProps = {
     show_menu_button?: boolean;
     show_selection_buttons?: boolean;
     is_first_column?: boolean;
+    is_solo?: boolean;
     latex_delimiters: {
         left: string;
         right: string;