@gradio/dataframe 0.23.1 → 0.23.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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

package/Dataframe.test.ts

@@ -1,5 +1,11 @@
 import { test, describe, afterEach, expect } from "vitest";
-import { cleanup, render, fireEvent, waitFor } from "@self/tootils/render";
+import {
+	cleanup,
+	render,
+	fireEvent,
+	waitFor,
+	within
+} from "@self/tootils/render";
 import { tick } from "svelte";
 
 import Dataframe from "./Index.svelte";
@@ -579,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());
 
@@ -788,3 +855,167 @@ describe("Copy", () => {
 		});
 	});
 });
+
+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;

package/dist/shared/EditableCell.svelte

@@ -21,13 +21,15 @@
 		i18n,
 		is_dragging = false,
 		wrap_text = false,
+		expanded = false,
 		show_selection_buttons = false,
 		coords,
 		on_select_column = null,
 		on_select_row = null,
 		el = $bindable(null),
 		onblur,
-		onkeydown
+		onkeydown,
+		pad_left = false
 	}: {
 		edit: boolean;
 		value?: CellValue;
@@ -55,6 +57,7 @@
 		i18n: I18nFormatter;
 		is_dragging?: boolean;
 		wrap_text?: boolean;
+		expanded?: boolean;
 		show_selection_buttons?: boolean;
 		coords: [number, number];
 		on_select_column?: ((col: number) => void) | null;
@@ -65,6 +68,7 @@
 			coords: [number, number];
 		}) => void;
 		onkeydown?: (event: KeyboardEvent) => void;
+		pad_left: boolean;
 	} = $props();
 
 	function truncate_text(
@@ -79,7 +83,9 @@
 		return str.slice(0, max_length) + "...";
 	}
 
-	let should_truncate = $derived(!edit && max_chars !== null && max_chars > 0);
+	let should_truncate = $derived(
+		!edit && !expanded && max_chars !== null && max_chars > 0
+	);
 
 	let display_content = $derived(
 		editable ? value : display_value !== null ? display_value : value
@@ -99,6 +105,22 @@
 		return {};
 	}
 
+	// grow the edit-mode textarea to fit its content so the overlay
+	// expands the same way the display span does.
+	function use_autosize(node: HTMLTextAreaElement): any {
+		function resize(): void {
+			node.style.height = "auto";
+			node.style.height = `${node.scrollHeight}px`;
+		}
+		node.addEventListener("input", resize);
+		requestAnimationFrame(resize);
+		return {
+			destroy() {
+				node.removeEventListener("input", resize);
+			}
+		};
+	}
+
 	function handle_blur(event: FocusEvent): void {
 		onblur?.({
 			blur_event: event,
@@ -114,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>
@@ -135,7 +159,9 @@
 		onmousedown={(e: MouseEvent) => e.stopPropagation()}
 		onclick={(e: MouseEvent) => e.stopPropagation()}
 		use:use_focus
+		use:use_autosize
 		onkeydown={handle_keydown}
+		class:pad_left
 	/>
 {/if}
 
@@ -149,7 +175,7 @@
 		role="button"
 		class:edit
 		class:expanded={edit}
-		class:multiline={header}
+		class:header
 		onfocus={(e) => e.preventDefault()}
 		style={styling}
 		data-editable={editable}
@@ -205,7 +231,7 @@
 	textarea {
 		position: absolute;
 		flex: 1 1 0%;
-		transform: translateX(-0.1px);
+		transform: translate(0.2px, -0.5px);
 		outline: none;
 		border: none;
 		background: transparent;
@@ -217,24 +243,33 @@
 		font-size: inherit;
 		font-weight: inherit;
 		line-height: var(--line-lg);
+		left: var(--size-2);
+		user-select: text;
 	}
 
 	textarea:focus {
 		outline: none;
 	}
 
+	textarea.pad_left {
+		margin-left: var(--size-7);
+	}
+
 	span {
 		flex: 1 1 0%;
 		position: relative;
 		display: block;
 		outline: none;
-		-webkit-user-select: text;
-		-moz-user-select: text;
-		-ms-user-select: text;
-		user-select: text;
 		cursor: text;
 		width: 100%;
-		overflow-wrap: break-word;
+		min-width: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.header {
+		font-weight: var(--weight-bold);
 	}
 
 	span.text.expanded {
@@ -245,21 +280,6 @@
 		overflow: visible;
 	}
 
-	.multiline {
-		white-space: pre;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.header {
-		transform: translateX(0);
-		font-weight: var(--weight-bold);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		margin-left: var(--size-1);
-	}
-
 	.edit {
 		opacity: 0;
 		pointer-events: none;
@@ -267,6 +287,8 @@
 
 	span :global(img) {
 		max-height: 100px;
+		max-width: 100%;
+		height: auto;
 		width: auto;
 		object-fit: contain;
 	}
@@ -278,8 +300,9 @@
 	.wrap,
 	.wrap.expanded {
 		white-space: normal;
-		word-wrap: break-word;
+		overflow: visible;
+		text-overflow: clip;
 		overflow-wrap: break-word;
-		word-wrap: break-word;
+		word-break: break-word;
 	}
 </style>

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

@@ -20,6 +20,7 @@ type $$ComponentProps = {
     i18n: I18nFormatter;
     is_dragging?: boolean;
     wrap_text?: boolean;
+    expanded?: boolean;
     show_selection_buttons?: boolean;
     coords: [number, number];
     on_select_column?: ((col: number) => void) | null;
@@ -30,6 +31,7 @@ type $$ComponentProps = {
         coords: [number, number];
     }) => void;
     onkeydown?: (event: KeyboardEvent) => void;
+    pad_left: boolean;
 };
 declare const EditableCell: import("svelte").Component<$$ComponentProps, {}, "value" | "el">;
 type EditableCell = ReturnType<typeof EditableCell>;