@gradio/dataframe 0.23.1 → 0.23.2

package/dist/shared/column_measurement.svelte.js

@@ -8,20 +8,87 @@ export function create_column_measurement(opts) {
     let header_height = $state(0);
     // use offsets (not just widths) avoids accumulated subpixel rounding errors
     let col_lefts = $state([]);
+    function resolve_user_width(raw, vw) {
+        if (!raw || raw === "auto")
+            return null;
+        if (raw.endsWith("%")) {
+            const pct = parseFloat(raw);
+            if (!isFinite(pct) || vw <= 0)
+                return null;
+            return (pct / 100) * vw;
+        }
+        if (raw.endsWith("px")) {
+            const n = parseFloat(raw);
+            return isFinite(n) ? n : null;
+        }
+        const n = parseFloat(raw);
+        return isFinite(n) ? n : null;
+    }
+    function clear_pin(el) {
+        if (el.style.width)
+            el.style.width = "";
+        if (el.style.minWidth)
+            el.style.minWidth = "";
+        if (el.style.maxWidth)
+            el.style.maxWidth = "";
+    }
+    function pin(el, target) {
+        if (el.style.width !== target)
+            el.style.width = target;
+        if (el.style.minWidth !== target)
+            el.style.minWidth = target;
+        if (el.style.maxWidth !== target)
+            el.style.maxWidth = target;
+    }
     function measure() {
         const current_row_el = opts.header_row_el();
         const current_table_el = opts.header_table_el();
-        if (!current_row_el)
+        if (!current_row_el || !current_table_el)
             return;
-        const cells = current_row_el.querySelectorAll(".header-cell");
-        const table_rect = current_table_el?.getBoundingClientRect();
-        const table_left = table_rect?.left ?? 0;
-        col_lefts = Array.from(cells).map((c) => c.getBoundingClientRect().left - table_left);
-        col_widths = Array.from(cells).map((c) => c.getBoundingClientRect().width);
-        if (current_table_el) {
-            total_header_width = table_rect?.width ?? 0;
-            header_height = table_rect?.height ?? 0;
+        const cells = Array.from(current_row_el.querySelectorAll(".header-cell"));
+        // sizing-body mirrors the data columns to give auto-layout a read on
+        // body-content widths. we also pin its cells so user widths are
+        // honored exactly (otherwise the sizing row's nowrap min-content
+        // forces the column wider than the user asked for).
+        const sizing_tds_all = Array.from(current_table_el.querySelectorAll(".sizing-body > tr > td"));
+        const sizing_data_tds = opts.show_row_numbers()
+            ? sizing_tds_all.slice(1)
+            : sizing_tds_all;
+        cells.forEach(clear_pin);
+        sizing_data_tds.forEach(clear_pin);
+        current_table_el.style.width = "auto";
+        current_table_el.getBoundingClientRect(); // force layout flush
+        const vw = opts.viewport_width();
+        const user_widths = opts.column_widths();
+        const next_widths = cells.map((cell, i) => {
+            const resolved = resolve_user_width(user_widths[i], vw);
+            if (resolved != null)
+                return resolved;
+            // cap auto-sized columns at the viewport so a single column
+            // can never be wider than the visible scroll area
+            const measured = cell.getBoundingClientRect().width;
+            return vw > 0 ? Math.min(measured, vw) : measured;
+        });
+        cells.forEach((cell, i) => pin(cell, `${next_widths[i]}px`));
+        sizing_data_tds.forEach((cell, i) => {
+            if (next_widths[i] == null)
+                return;
+            pin(cell, `${next_widths[i]}px`);
+        });
+        // set the table width to the sum of columns so auto-layout
+        // has no extra space to redistribute
+        let table_w = next_widths.reduce((a, b) => a + b, 0);
+        if (opts.show_row_numbers()) {
+            const rn = current_row_el.querySelector(".row-number-header");
+            if (rn)
+                table_w += rn.getBoundingClientRect().width;
         }
+        current_table_el.style.width = `${table_w}px`;
+        const after_rect = current_table_el.getBoundingClientRect();
+        col_lefts = cells.map((c) => c.getBoundingClientRect().left - after_rect.left);
+        col_widths = next_widths;
+        total_header_width = after_rect.width;
+        header_height = after_rect.height;
         opts.on_resize?.();
     }
     $effect(() => {
@@ -40,6 +107,11 @@ export function create_column_measurement(opts) {
         cells.forEach((cell) => ro.observe(cell));
         return () => ro.disconnect();
     });
+    $effect(() => {
+        opts.viewport_width();
+        opts.column_widths();
+        measure();
+    });
     let row_num_width = $derived.by(() => {
         if (!opts.show_row_numbers())
             return 0;
@@ -53,10 +125,11 @@ export function create_column_measurement(opts) {
         if (col_widths[index] !== undefined) {
             return `width: ${col_widths[index]}px; flex: 0 0 ${col_widths[index]}px;`;
         }
-        const user_widths = opts.column_widths();
-        if (user_widths[index])
-            return `width: ${user_widths[index]};`;
-        return "width: 150px;";
+        const resolved = resolve_user_width(opts.column_widths()[index], opts.viewport_width());
+        if (resolved != null) {
+            return `width: ${resolved}px; flex: 0 0 ${resolved}px;`;
+        }
+        return "width: 150px; flex: 0 0 150px;";
     }
     return {
         get col_widths() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.23.1",
+  "version": "0.23.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -15,15 +15,15 @@
     "dequal": "^2.0.3",
     "@tanstack/table-core": "^8.21.3",
     "@tanstack/virtual-core": "^3.13.6",
-    "@gradio/atoms": "^0.23.1",
-    "@gradio/checkbox": "^0.6.7",
+    "@gradio/atoms": "^0.24.0",
+    "@gradio/checkbox": "^0.7.0",
     "@gradio/client": "^2.2.0",
-    "@gradio/icons": "^0.15.1",
     "@gradio/button": "^0.6.6",
+    "@gradio/icons": "^0.15.1",
     "@gradio/markdown-code": "^0.7.0",
-    "@gradio/statustracker": "^0.14.0",
-    "@gradio/upload": "^0.17.8",
-    "@gradio/utils": "^0.12.2"
+    "@gradio/statustracker": "^0.14.1",
+    "@gradio/utils": "^0.12.2",
+    "@gradio/upload": "^0.17.9"
   },
   "exports": {
     ".": {

package/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/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/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/shared/HeaderCell.svelte

@@ -5,6 +5,7 @@
 	import FilterIcon from "./icons/FilterIcon.svelte";
 	import SortButtonUp from "./icons/SortButtonUp.svelte";
 	import SortButtonDown from "./icons/SortButtonDown.svelte";
+	import { BaseCheckbox } from "@gradio/checkbox";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import type { SortDirection } from "./types";
 
@@ -14,6 +15,8 @@
 		is_editing = false,
 		is_selected = false,
 		is_static = false,
+		is_bool = false,
+		select_all_state = "unchecked",
 		sort_direction = null,
 		sort_priority = null,
 		multi_sort = false,
@@ -25,15 +28,19 @@
 		editable = true,
 		max_chars = undefined,
 		i18n,
+		wrap_text = false,
 		onclick,
 		on_menu_click,
-		on_end_edit
+		on_end_edit,
+		on_select_all
 	}: {
 		value: string;
 		col_idx: number;
 		is_editing?: boolean;
 		is_selected?: boolean;
 		is_static?: boolean;
+		is_bool?: boolean;
+		select_all_state?: "checked" | "unchecked" | "indeterminate";
 		sort_direction?: SortDirection | null;
 		sort_priority?: number | null;
 		multi_sort?: boolean;
@@ -45,10 +52,16 @@
 		editable?: boolean;
 		max_chars?: number | undefined;
 		i18n: I18nFormatter;
+		wrap_text?: boolean;
 		onclick: (event: MouseEvent, col: number) => void;
 		on_menu_click: (event: MouseEvent, col: number) => void;
 		on_end_edit: (key: string) => void;
+		on_select_all?: (col: number, checked: boolean) => void;
 	} = $props();
+
+	let show_select_all = $derived(
+		is_bool && editable && !is_static && !!on_select_all
+	);
 </script>
 
 <th
@@ -57,6 +70,7 @@
 	class:sorted={sort_direction !== null}
 	class:filtered={is_filtered}
 	class:first-column={is_first_column}
+	data-heading={col_idx}
 	onclick={(e) => onclick(e, col_idx)}
 	onmousedown={(e) => {
 		e.preventDefault();
@@ -66,6 +80,25 @@
 >
 	<div class="cell-wrap">
 		<div class="header-content">
+			{#if show_select_all}
+				<div
+					class="select-all-checkbox"
+					role="button"
+					tabindex="-1"
+					onclick={(e) => e.stopPropagation()}
+					onmousedown={(e) => e.stopPropagation()}
+					onkeydown={(e) => e.stopPropagation()}
+				>
+					<BaseCheckbox
+						value={select_all_state === "checked"}
+						indeterminate={select_all_state === "indeterminate"}
+						label={`Toggle all: ${value}`}
+						interactive={true}
+						on_select={() =>
+							on_select_all?.(col_idx, select_all_state !== "checked")}
+					/>
+				</div>
+			{/if}
 			<EditableCell
 				{value}
 				{latex_delimiters}
@@ -81,7 +114,9 @@
 				{is_static}
 				{i18n}
 				{max_chars}
+				{wrap_text}
 				coords={[col_idx, 0]}
+				pad_left={show_select_all ? true : false}
 			/>
 		</div>
 		{#if sort_direction || is_filtered || is_static}
@@ -129,6 +164,13 @@
 		padding: 0;
 		background: var(--table-even-background-fill) !important;
 		font-weight: var(--weight-bold, 700);
+		outline: none;
+		box-shadow:
+			inset 1px 0 0 var(--border-color-primary),
+			inset 0 0 0 1px var(--ring-color);
+		padding: 0;
+		overflow: visible;
+		box-sizing: border-box;
 	}
 
 	.header-cell.first-column {
@@ -142,10 +184,14 @@
 
 	.header-cell.focus {
 		--ring-color: var(--color-accent);
+		--sel-top: inset 0 2px 0 0 var(--ring-color);
+		--sel-bottom: inset 0 -2px 0 0 var(--ring-color);
+		--sel-left: inset 2px 0 0 0 var(--ring-color);
+		--sel-right: inset -2px 0 0 0 var(--ring-color);
 		box-shadow:
-			inset 1px 0 0 var(--border-color-primary),
-			inset 0 0 0 2px var(--ring-color);
-		z-index: 4;
+			var(--sel-top), var(--sel-bottom), var(--sel-left), var(--sel-right);
+		z-index: 2;
+		position: relative;
 	}
 
 	.header-cell.focus.first-column {
@@ -155,7 +201,7 @@
 	.header-content {
 		display: flex;
 		align-items: center;
-		gap: var(--size-1);
+		gap: var(--size-3);
 		overflow: hidden;
 		min-width: 0;
 	}
@@ -215,4 +261,20 @@
 		overflow: visible;
 		min-width: 0;
 	}
+
+	.select-all-checkbox {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: var(--size-4);
+	}
+
+	.select-all-checkbox :global(label) {
+		margin: 0;
+	}
+
+	.select-all-checkbox :global(span) {
+		display: none;
+	}
 </style>