@gradio/dataframe 0.24.4 → 0.24.6

package/shared/Table.svelte

@@ -35,7 +35,7 @@
 		is_cell_selected,
 		handle_click_outside as handle_click_outside_util
 	} from "./utils/selection_utils";
-	import { copy_table_data, handle_file_upload } from "./utils/table_utils";
+	import { copy_table_data, parse_table_file } from "./utils/table_utils";
 	import { gradio_filter_fn } from "./utils/filter";
 	import { create_column_measurement } from "./column_measurement.svelte.js";
 
@@ -73,7 +73,8 @@
 		onselect,
 		onedit,
 		onsearch,
-		onfullscreen
+		onfullscreen,
+		onerror
 	}: {
 		datatype: Datatype | Datatype[];
 		label?: string | null;
@@ -109,6 +110,7 @@
 		onedit?: (detail: EditData) => void;
 		onsearch?: (detail: string | null) => void;
 		onfullscreen?: () => void;
+		onerror?: (message: string) => void;
 	} = $props();
 
 	type GradioRow = Record<string, CellValue> & { _index: number };
@@ -252,6 +254,10 @@
 
 	let selected_cells: CellCoordinate[] = $state([]);
 	let selected: CellCoordinate | false = $state(false);
+	// where a shift+click range starts. `selected` cannot serve, because it
+	// follows every click, the shift+clicks that extend the range included.
+	// nothing renders from it, so it does not need to be reactive
+	let range_anchor: CellCoordinate | false = false;
 	let editing: CellCoordinate | false = $state(false);
 	let header_edit: number | false = $state(false);
 	let selected_header: number | false = $state(false);
@@ -273,7 +279,11 @@
 	let copy_flash = $state(false);
 	let is_dragging = $state(false);
 	let show_scroll_button = $state(false);
-	let dragging = $state(false); // file drag
+	let file_dragging = $state(false);
+	let discard_pending_edit = false;
+	// document-unique so several dataframes on a page do not describe each
+	// other's grids
+	const drop_hint_id = $props.id();
 
 	let parent: HTMLDivElement;
 
@@ -295,6 +305,12 @@
 		return rows.findIndex((row) => row.original._index === row_index);
 	}
 
+	// for the whole-selection sweeps, where one findIndex per cell would make
+	// Delete and copy quadratic on a column selection
+	function visible_row_set(): Set<number> {
+		return new Set(rows.map((row) => row.original._index));
+	}
+
 	function is_active_cell(row: number, col: number): boolean {
 		return !!(
 			keyboard_active &&
@@ -322,6 +338,7 @@
 
 	function set_active_cell(coord: CellCoordinate, move_focus = true): void {
 		selected = coord;
+		range_anchor = coord;
 		selected_cells = [coord];
 		selected_header = false;
 		header_edit = false;
@@ -341,6 +358,7 @@
 	function handle_header_focus(col: number): void {
 		if (header_edit !== false) return;
 		selected = false;
+		range_anchor = false;
 		selected_cells = [];
 		selected_header = col;
 	}
@@ -513,7 +531,8 @@
 	function handle_cell_click(
 		event: MouseEvent,
 		row: number,
-		col: number
+		col: number,
+		view_index: number
 	): void {
 		const col_is_static =
 			!editable ||
@@ -525,25 +544,37 @@
 		event.stopPropagation();
 
 		const coord: CellCoordinate = [row, col];
-		if (event.shiftKey && selected) {
-			// range select
-			const [r1, c1] = selected;
-			const [r2, c2] = coord;
-			const new_cells: CellCoordinate[] = [];
-			for (let r = Math.min(r1, r2); r <= Math.max(r1, r2); r++) {
-				for (let c = Math.min(c1, c2); c <= Math.max(c1, c2); c++) {
-					new_cells.push([r, c]);
+		if (event.shiftKey && range_anchor) {
+			// the range runs from the anchor, and the search may have hidden its
+			// row since
+			const from_row = visible_row_position(range_anchor[0]);
+			if (from_row === -1) {
+				selected_cells = [coord];
+				range_anchor = coord;
+			} else {
+				const c1 = range_anchor[1];
+				const new_cells: CellCoordinate[] = [];
+				for (
+					let p = Math.min(from_row, view_index);
+					p <= Math.max(from_row, view_index);
+					p++
+				) {
+					for (let c = Math.min(c1, col); c <= Math.max(c1, col); c++) {
+						new_cells.push([rows[p].original._index, c]);
+					}
 				}
+				selected_cells = new_cells;
 			}
-			selected_cells = new_cells;
 		} else if (event.metaKey || event.ctrlKey) {
 			// toggle select
 			const exists = selected_cells.some(([r, c]) => r === row && c === col);
 			selected_cells = exists
 				? selected_cells.filter(([r, c]) => !(r === row && c === col))
 				: [...selected_cells, coord];
+			range_anchor = coord;
 		} else {
 			selected_cells = [coord];
+			range_anchor = coord;
 		}
 
 		selected = coord;
@@ -578,12 +609,21 @@
 		blur_event: FocusEvent;
 		coords: [number, number];
 	}): void {
+		// an import replaces the table under an open editor, and EditableCell
+		// commits when it leaves edit mode either way. that half-typed value
+		// belongs to the table that just went away
+		if (discard_pending_edit) return;
+
 		const { coords } = detail;
 		const input_el = detail.blur_event.target as HTMLTextAreaElement;
 		if (!input_el || input_el.value === undefined) return;
 
 		const [row, col] = coords;
-		const old_value = values?.[row]?.[col];
+		// and deleting a row leaves the editor's row behind. a column short of
+		// the header is not the same thing: a value can arrive ragged, and the
+		// cell past the end of its own row still renders and still takes an edit
+		if (!values?.[row]) return;
+		const old_value = values[row][col];
 		const new_value = input_el.value;
 
 		if (String(old_value) !== String(new_value)) {
@@ -607,6 +647,7 @@
 
 		editing = false;
 		selected = false;
+		range_anchor = false;
 		selected_cells = [];
 		active_cell_menu = null;
 		active_header_menu = null;
@@ -803,25 +844,51 @@
 		push_change(filtered_values);
 	}
 
-	async function handle_copy(): Promise<void> {
+	// false when nothing reached the clipboard, so the toolbar can hold back its
+	// "Copied to clipboard" state
+	async function handle_copy(): Promise<boolean> {
+		const visible = visible_row_set();
+		const cells =
+			selected_cells.length > 0
+				? selected_cells.filter(([r]) => visible.has(r))
+				: rows.flatMap((row) => {
+						const r = row.original._index;
+						return (values[r] ?? []).map((_, c) => [r, c] as CellCoordinate);
+					});
+		if (cells.length === 0) return false;
+
 		const data_for_copy = values.map((row) =>
 			row.map((val, j) => ({ id: `${j}`, value: val }))
 		);
-		const cells_to_copy = selected_cells.length > 0 ? selected_cells : null;
-		await copy_table_data(data_for_copy, cells_to_copy);
+		try {
+			await copy_table_data(data_for_copy, cells);
+		} catch (err) {
+			// the write can be refused outright, on an insecure origin or without
+			// permission. logged because this catches anything else thrown too
+			console.error(err);
+			return false;
+		}
 		copy_flash = true;
 		setTimeout(() => (copy_flash = false), 800);
+		return true;
+	}
+
+	// every one of these holds a row or column index, so they have to go
+	// whenever the table stops being the one they were recorded against
+	function reset_interaction_state(): void {
+		selected_cells = [];
+		selected = false;
+		range_anchor = false;
+		editing = false;
+		header_edit = false;
+		selected_header = false;
+		active_cell_menu = null;
+		active_header_menu = null;
 	}
 
 	function handle_click_outside(event: Event): void {
 		if (handle_click_outside_util(event, parent)) {
-			selected_cells = [];
-			selected = false;
-			editing = false;
-			header_edit = false;
-			selected_header = false;
-			active_cell_menu = null;
-			active_header_menu = null;
+			reset_interaction_state();
 		}
 	}
 
@@ -895,6 +962,7 @@
 					set_active_cell([rows[row_position - 1].original._index, col]);
 				} else {
 					selected = false;
+					range_anchor = false;
 					selected_cells = [];
 					selected_header = col;
 					focus_header(col);
@@ -1001,13 +1069,28 @@
 				if (!editing && editable) {
 					e.preventDefault();
 					const new_values = values.map((value_row) => [...value_row]);
+					const visible = visible_row_set();
+					let cleared = false;
 					selected_cells.forEach(([selected_row, selected_col]) => {
-						if (!is_static_column(selected_col)) {
+						// undefined is a cell past the end of a short row, or a row a
+						// shrunk table no longer has; a null is a value, so it is cleared
+						const current = new_values[selected_row]?.[selected_col];
+						if (
+							!is_static_column(selected_col) &&
+							visible.has(selected_row) &&
+							current !== "" &&
+							current !== undefined
+						) {
 							new_values[selected_row][selected_col] = "";
+							cleared = true;
 						}
 					});
-					values = new_values;
-					push_change(new_values);
+					// pushing with nothing written would fire change and input for an
+					// identical table
+					if (cleared) {
+						values = new_values;
+						push_change(new_values);
+					}
 				}
 				break;
 			default:
@@ -1051,21 +1134,87 @@
 		}
 	}
 
-	function on_file_upload(file_data: any): void {
-		handle_file_upload(
-			typeof file_data === "string" ? file_data : (file_data?.data ?? ""),
-			(head) => {
-				headers = head.map((h: any) => h ?? "");
-				return (headers as string[]).map((h: string, i: number) => ({
-					id: `h_${i}`,
-					value: h
-				}));
-			},
-			(vals) => {
-				values = vals;
-				push_change(vals, headers as string[]);
-			}
+	function interpolate(
+		message: string,
+		values: Record<string, string | number>
+	): string {
+		return message.replace(/\{(\w+)\}/g, (_, key) => String(values[key]));
+	}
+
+	function apply_imported_table(
+		new_headers: (string | null)[],
+		new_values: CellValue[][]
+	): void {
+		if (!new_headers.length) {
+			throw new Error(i18n("dataframe.import_empty_file"));
+		}
+		// a file of separators alone parses into a header of blank names, and
+		// importing it would replace the table with unnamed columns
+		if (new_headers.every((h) => !h?.trim())) {
+			throw new Error(i18n("dataframe.import_no_column_names"));
+		}
+		// a row the header cannot account for would reach the backend as a ragged
+		// value, and the column checks below only see the header
+		const ragged = new_values.findIndex(
+			(row) => row.length !== new_headers.length
 		);
+		if (ragged !== -1) {
+			throw new Error(
+				interpolate(i18n("dataframe.import_ragged_row"), {
+					line: ragged + 2,
+					fields: new_values[ragged].length,
+					columns: new_headers.length
+				})
+			);
+		}
+		// the menu paths already refuse to change a fixed shape or write to a
+		// read-only column, so an import must not be the way around them
+		if (static_columns.length > 0) {
+			throw new Error(i18n("dataframe.import_static_columns"));
+		}
+		if (col_count[1] === "fixed" && new_headers.length !== col_count[0]) {
+			throw new Error(
+				interpolate(i18n("dataframe.import_fixed_columns"), {
+					expected: col_count[0],
+					actual: new_headers.length
+				})
+			);
+		}
+		if (row_count[1] === "fixed" && new_values.length !== row_count[0]) {
+			throw new Error(
+				interpolate(i18n("dataframe.import_fixed_rows"), {
+					expected: row_count[0],
+					actual: new_values.length
+				})
+			);
+		}
+
+		discard_pending_edit = true;
+		headers = new_headers;
+		values = new_values;
+		reset_interaction_state();
+		// tanstack keys these by positional col_N, so they would land on whichever
+		// column now sits at that index. a search is worse than misplaced: it hides
+		// imported rows, and commit_filter then drops the hidden ones from the value
+		sorting = [];
+		column_filters = [];
+		global_filter = "";
+		push_change(new_values, headers as string[]);
+		tick().then(() => (discard_pending_edit = false));
+	}
+
+	// undefined when every dropped file was filtered out by `filetype`
+	function on_file_upload(file: File | undefined): void {
+		if (!editable || !file) return;
+		parse_table_file(file)
+			.then(({ headers: new_headers, values: new_values }) =>
+				apply_imported_table(new_headers, new_values)
+			)
+			.catch((e) => {
+				const message = e instanceof Error ? e.message : String(e);
+				if (onerror) onerror(message);
+				else console.error(message);
+			});
 	}
 
 	onMount(() => {
@@ -1133,7 +1282,11 @@
 	}}
 />
 
-<div class="table-container" class:fullscreen>
+<div
+	class="table-container"
+	class:fullscreen
+	class:no-rows={values.length === 0}
+>
 	{#if (label && label.length !== 0 && show_label) || (buttons === null ? true : buttons.includes("fullscreen")) || (buttons === null ? true : buttons.includes("copy")) || show_search !== "none"}
 		<div class="header-row">
 			{#if label && label.length !== 0 && show_label}
@@ -1159,6 +1312,7 @@
 		bind:this={parent}
 		class="table-wrap"
 		class:dragging={is_dragging}
+		class:file-dragging={file_dragging && editable}
 		class:menu-open={active_cell_menu || active_header_menu}
 		onkeydown={handle_keydown}
 		role="grid"
@@ -1166,6 +1320,7 @@
 		aria-rowcount={rows.length + 1}
 		aria-colcount={resolved_headers.length + Number(show_row_numbers)}
 		aria-readonly={!editable}
+		aria-describedby={editable ? drop_hint_id : undefined}
 		tabindex={rows.length === 0 ? 0 : -1}
 		style="--df-max-col-width: {viewport_width}px;"
 	>
@@ -1176,10 +1331,12 @@
 			center={false}
 			boundedheight={false}
 			disable_click={true}
+			format="blob"
+			filetype={[".csv", ".tsv"]}
 			{root}
 			onload={on_file_upload}
-			bind:dragging
-			aria_label={i18n("dataframe.drop_to_upload")}
+			onerror={editable ? onerror : undefined}
+			bind:dragging={file_dragging}
 			tab_index={-1}
 			container_element="div"
 		>
@@ -1281,6 +1438,10 @@
 					{#each virtual_items as virtual_row (virtual_row.key)}
 						{@const row = rows[virtual_row.index]}
 						{@const row_idx = row?.original._index ?? virtual_row.index}
+						{@const row_above =
+							rows[virtual_row.index - 1]?.original._index ?? null}
+						{@const row_below =
+							rows[virtual_row.index + 1]?.original._index ?? null}
 						{#if row}
 							<div
 								class="virtual-row"
@@ -1325,7 +1486,9 @@
 										cell_style={get_styling(row_idx, col_idx)}
 										selection_classes={is_cell_selected(
 											[row_idx, col_idx],
-											selected_cells
+											selected_cells,
+											row_above,
+											row_below
 										)}
 										is_active={is_active_cell(row_idx, col_idx)}
 										aria_row_index={virtual_row.index + 2}
@@ -1357,7 +1520,8 @@
 										{components}
 										{is_dragging}
 										wrap_text={wrap}
-										onmousedown={(e) => handle_cell_click(e, row_idx, col_idx)}
+										onmousedown={(e) =>
+											handle_cell_click(e, row_idx, col_idx, virtual_row.index)}
 										ondblclick={(e) =>
 											handle_cell_dblclick(e, row_idx, col_idx)}
 										oncontextmenu={(e) => {
@@ -1396,6 +1560,19 @@
 			<button class="scroll-top-button" onclick={scroll_to_top}>&uarr;</button>
 		{/if}
 	</div>
+
+	<!-- outside the grid: #13729 took the label off a span like this one and put it
+	     on the grid as an attribute, and a test pins that there is no sr-only text
+	     inside. a description has no equally well supported attribute form -->
+	{#if editable}
+		<span id={drop_hint_id} class="drop-hint"
+			>{i18n("dataframe.drop_to_upload")}</span
+		>
+	{/if}
+
+	{#if values.length === 0 && editable && row_count[1] === "dynamic"}
+		<EmptyRowButton on_click={() => add_row()} />
+	{/if}
 </div>
 
 {#if active_cell_menu || active_header_menu}
@@ -1462,10 +1639,6 @@
 	/>
 {/if}
 
-{#if values.length === 0 && editable && row_count[1] === "dynamic"}
-	<EmptyRowButton on_click={() => add_row()} />
-{/if}
-
 <style>
 	.table-container {
 		display: flex;
@@ -1502,10 +1675,23 @@
 		min-height: 0;
 	}
 
+	/* An empty body would otherwise fill the screen and carry the add-row button off it.
+	   Gated on the data alone, so empty tables that show no button stop stretching too. */
+	.table-container.fullscreen.no-rows .table-wrap,
+	.table-container.fullscreen.no-rows .table-wrap > :global(*),
+	.table-container.fullscreen.no-rows .virtual-table-viewport {
+		flex: 0 0 auto;
+	}
+
 	.table-wrap {
 		position: relative;
-		transition: 150ms;
 		width: 100%;
+		/* the duration used to stand alone, which means every property. that
+		   swept the drag outline in from `currentcolor`, near-white in dark
+		   mode, before it reached the accent. the list is what the fullscreen
+		   rules above actually change */
+		transition-property: flex-grow, flex-shrink, flex-basis, min-height;
+		transition-duration: 150ms;
 	}
 
 	/* Constrain Upload component wrapper */
@@ -1521,6 +1707,27 @@
 		outline: none;
 	}
 
+	/* after :focus-within, which is equally specific and would otherwise
+	   clear the outline whenever a cell is focused. drawn inside the box so
+	   hovering a file over the table shifts nothing */
+	.table-wrap.file-dragging {
+		outline: 2px solid var(--color-accent);
+		outline-offset: -2px;
+		/* matches the .upload-container border the outline covers */
+		border-radius: var(--table-radius);
+	}
+
+	/* an aria-describedby target, so it has to stay in the accessibility tree
+	   rather than be hidden with display: none */
+	.drop-hint {
+		position: absolute;
+		clip-path: inset(50%);
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
 	.table-wrap.dragging {
 		cursor: crosshair !important;
 		user-select: none;

package/shared/Toolbar.svelte

@@ -18,7 +18,7 @@
 		show_copy_button?: boolean;
 		show_search?: "none" | "search" | "filter";
 		fullscreen?: boolean;
-		on_copy: () => Promise<void>;
+		on_copy: () => Promise<boolean>;
 		on_commit_filter: () => void;
 		current_search_query?: string | null;
 		onsearch?: (query: string | null) => void;
@@ -48,8 +48,7 @@
 	}
 
 	async function handle_copy(): Promise<void> {
-		await on_copy();
-		copy_feedback();
+		if (await on_copy()) copy_feedback();
 	}
 
 	$effect(() => {

package/shared/types.ts

@@ -3,12 +3,6 @@ export type EditingState = CellCoordinate | false;
 
 export type Headers = (string | null)[];
 
-export interface HeadersWithIDs {
-	id: string;
-	value: string;
-}
-[];
-
 export type CellValue = string | number | boolean;
 
 export interface TableCell {

package/shared/utils/selection_utils.ts

@@ -10,15 +10,20 @@ export function is_cell_in_selection(
 	return selected_cells.some(([r, c]) => r === row && c === col);
 }
 
+// row_above/row_below are the data indices of the rows the caller is rendering
+// on either side of `cell`, or null at an edge of the view. A search or a sort
+// makes them differ from row ± 1, so only the caller knows them.
 export function is_cell_selected(
 	cell: CellCoordinate,
-	selected_cells: CellCoordinate[]
+	selected_cells: CellCoordinate[],
+	row_above: number | null,
+	row_below: number | null
 ): string {
 	const [row, col] = cell;
 	if (!selected_cells.some(([r, c]) => r === row && c === col)) return "";
 
-	const up = selected_cells.some(([r, c]) => r === row - 1 && c === col);
-	const down = selected_cells.some(([r, c]) => r === row + 1 && c === col);
+	const up = selected_cells.some(([r, c]) => r === row_above && c === col);
+	const down = selected_cells.some(([r, c]) => r === row_below && c === col);
 	const left = selected_cells.some(([r, c]) => r === row && c === col - 1);
 	const right = selected_cells.some(([r, c]) => r === row && c === col + 1);