@gradio/dataframe 0.24.5 → 0.24.7

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 };
@@ -277,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;
 
@@ -603,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)) {
@@ -858,16 +873,22 @@
 		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;
-			range_anchor = false;
-			editing = false;
-			header_edit = false;
-			selected_header = false;
-			active_cell_menu = null;
-			active_header_menu = null;
+			reset_interaction_state();
 		}
 	}
 
@@ -1113,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(() => {
@@ -1225,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"
@@ -1232,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;"
 	>
@@ -1242,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"
 		>
@@ -1470,6 +1561,15 @@
 		{/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}
@@ -1585,8 +1685,13 @@
 
 	.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 */
@@ -1602,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/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/table_utils.ts

@@ -1,4 +1,4 @@
-import type { CellValue, Headers, HeadersWithIDs, TableData } from "../types";
+import type { CellValue, Headers, TableData } from "../types";
 import { dsvFormat } from "d3-dsv";
 
 export function make_cell_id(row: number, col: number): string {
@@ -50,49 +50,43 @@ export async function copy_table_data(
 	}
 }
 
-export function guess_delimiter(
-	text: string,
-	possibleDelimiters: string[]
-): string[] {
-	return possibleDelimiters.filter(weedOut);
-
-	function weedOut(delimiter: string): boolean {
-		var cache = -1;
-		return text.split("\n").every(checkLength);
-
-		function checkLength(line: string): boolean {
-			if (!line) return true;
-			var length = line.split(delimiter).length;
-			if (cache < 0) cache = length;
-			return cache === length && length > 1;
+export async function parse_table_file(
+	file: File
+): Promise<{ headers: Headers; values: CellValue[][] }> {
+	const text = await file.text();
+	if (!text.trim()) return { headers: [], values: [] };
+	// the drop zone only accepts .csv and .tsv, so the extension goes first and
+	// wins any tie, but a mislabeled file is still read by its content: a
+	// separator only takes the file if it splits every line the same way, which
+	// is what tells a real separator from one that sits in a header name. the
+	// split is d3's rather than a raw count, so a separator inside a quoted
+	// field does not throw the detection off.
+	const by_extension = file.name.toLowerCase().endsWith(".tsv") ? "\t" : ",";
+	const candidates = by_extension === "\t" ? ["\t", ","] : [",", "\t"];
+	let consistent: string[][] | undefined;
+	let ragged: string[][] | undefined;
+	let unsplit: string[][] | undefined;
+	for (const delimiter of candidates) {
+		// a blank line parses to a single empty field, which both the width
+		// checks below and the caller's ragged check would read as a short row
+		const parsed = dsvFormat(delimiter)
+			.parseRows(text)
+			.filter((row) => row.length > 1 || row[0] !== "");
+		const width = parsed[0]?.length ?? 0;
+		// the extension is first in `candidates`, so this keeps its parse for the
+		// single-column case rather than running it again at the end
+		unsplit ??= parsed;
+		if (width < 2) continue;
+		if (parsed.every((row) => row.length === width)) {
+			consistent = parsed;
+			break;
 		}
+		// a separator that splits the header but leaves the rows uneven is
+		// usually the one that just happens to appear in a header name. keep it
+		// only in case the other does not split at all, where a ragged table is
+		// still better to report on than an unsplit one
+		ragged ??= parsed;
 	}
-}
-
-export function data_uri_to_blob(data_uri: string): Blob {
-	const byte_str = atob(data_uri.split(",")[1]);
-	const mime_str = data_uri.split(",")[0].split(":")[1].split(";")[0];
-	const ab = new ArrayBuffer(byte_str.length);
-	const ia = new Uint8Array(ab);
-	for (let i = 0; i < byte_str.length; i++) {
-		ia[i] = byte_str.charCodeAt(i);
-	}
-	return new Blob([ab], { type: mime_str });
-}
-
-export function handle_file_upload(
-	data_uri: string,
-	update_headers: (headers: Headers) => HeadersWithIDs[],
-	update_values: (values: CellValue[][]) => void
-): void {
-	const blob = data_uri_to_blob(data_uri);
-	const reader = new FileReader();
-	reader.addEventListener("loadend", (e) => {
-		if (!e?.target?.result || typeof e.target.result !== "string") return;
-		const [delimiter] = guess_delimiter(e.target.result, [",", "\t"]);
-		const [head, ...rest] = dsvFormat(delimiter).parseRows(e.target.result);
-		update_headers(head);
-		update_values(rest);
-	});
-	reader.readAsText(blob);
+	const [head = [], ...rest] = consistent ?? ragged ?? unsplit ?? [];
+	return { headers: head.map((h) => h ?? ""), values: rest };
 }

package/shared/utils/utils.ts

@@ -15,7 +15,6 @@ export type Datatype =
 export type Metadata = {
 	[key: string]: string[][] | null;
 } | null;
-export type HeadersWithIDs = { value: string; id: string }[];
 export type DataframeValue = {
 	data: Data;
 	headers: Headers;

package/standalone/default_i18n.ts

@@ -5,6 +5,18 @@ export const default_i18n: Record<string, string> = {
 	"dataframe.add_column_left": "Add column left",
 	"dataframe.add_column_right": "Add column right",
 	"dataframe.delete_column": "Delete column",
+	"dataframe.drop_to_upload":
+		"Drop CSV or TSV files here to import data into dataframe",
+	"dataframe.import_empty_file": "The dropped file is empty.",
+	"dataframe.import_no_column_names": "The dropped file has no column names.",
+	"dataframe.import_ragged_row":
+		"Line {line} of the file has {fields} fields, the header has {columns}.",
+	"dataframe.import_static_columns":
+		"Cannot import into a table with read-only columns.",
+	"dataframe.import_fixed_columns":
+		"This table takes exactly {expected} columns, the file has {actual}.",
+	"dataframe.import_fixed_rows":
+		"This table takes exactly {expected} rows, the file has {actual}.",
 	"dataframe.sort_asc": "Sort ascending",
 	"dataframe.sort_desc": "Sort descending",
 	"dataframe.sort_ascending": "Sort ascending",

package/test/table_utils.test.ts

@@ -2,8 +2,7 @@ import { describe, test, expect } from "vitest";
 import {
 	make_cell_id,
 	make_header_id,
-	guess_delimiter,
-	data_uri_to_blob
+	parse_table_file
 } from "../shared/utils/table_utils";
 import { cast_value_to_type } from "../shared/utils/utils";
 
@@ -69,41 +68,106 @@ describe("cast_value_to_type", () => {
 	});
 });
 
-describe("guess_delimiter", () => {
-	test("detects comma delimiter", () => {
-		const csv = "a,b,c\n1,2,3\n4,5,6";
-		expect(guess_delimiter(csv, [",", "\t"])).toContain(",");
+describe("parse_table_file", () => {
+	test("detects a comma-separated file", async () => {
+		const file = new File(["a,b,c\n1,2,3\n4,5,6"], "data.csv");
+		expect(await parse_table_file(file)).toEqual({
+			headers: ["a", "b", "c"],
+			values: [
+				["1", "2", "3"],
+				["4", "5", "6"]
+			]
+		});
 	});
 
-	test("detects tab delimiter", () => {
-		const tsv = "a\tb\tc\n1\t2\t3\n4\t5\t6";
-		expect(guess_delimiter(tsv, [",", "\t"])).toContain("\t");
+	test("detects a tab-separated file", async () => {
+		const file = new File(["a\tb\tc\n1\t2\t3\n4\t5\t6"], "data.tsv");
+		expect(await parse_table_file(file)).toEqual({
+			headers: ["a", "b", "c"],
+			values: [
+				["1", "2", "3"],
+				["4", "5", "6"]
+			]
+		});
 	});
 
-	test("returns empty array when no consistent delimiter", () => {
-		const text = "abc\ndef\nghi";
-		expect(guess_delimiter(text, [",", "\t"])).toEqual([]);
+	test("picks the extension's delimiter when both look consistent", async () => {
+		const file = new File(["first,last\tage\nAlice,Smith\t30\n"], "data.tsv");
+		expect(await parse_table_file(file)).toEqual({
+			headers: ["first,last", "age"],
+			values: [["Alice,Smith", "30"]]
+		});
 	});
 
-	test("handles single-line input", () => {
-		// single line with commas — cache set once, always matches
-		const text = "a,b,c";
-		expect(guess_delimiter(text, [",", "\t"])).toContain(",");
+	test("reads a mislabeled file by its content", async () => {
+		const file = new File(["name,age\nAlice,30\n"], "data.tsv");
+		expect(await parse_table_file(file)).toEqual({
+			headers: ["name", "age"],
+			values: [["Alice", "30"]]
+		});
+	});
+
+	// counting raw separators misses this: the quoted comma makes the comma counts
+	// disagree between the two lines, so nothing looks consistent
+	test("reads a mislabeled file whose field holds a quoted comma", async () => {
+		const file = new File(['name,note\nA,"x,y"\n'], "data.tsv");
+		expect(await parse_table_file(file)).toEqual({
+			headers: ["name", "note"],
+			values: [["A", "x,y"]]
+		});
+	});
+
+	// the extension says comma and the header does split on one, but only the
+	// tab splits every line, so the name loses to the file's own shape
+	test("reads a mislabeled file whose header holds the other separator", async () => {
+		const file = new File(["first,last\tage\nAlice\t30\n"], "data.csv");
+		expect(await parse_table_file(file)).toEqual({
+			headers: ["first,last", "age"],
+			values: [["Alice", "30"]]
+		});
 	});
-});
 
-describe("data_uri_to_blob", () => {
-	test("converts data URI to Blob with correct MIME type", () => {
-		const data_uri = "data:text/plain;base64,SGVsbG8=";
-		const blob = data_uri_to_blob(data_uri);
-		expect(blob.type).toBe("text/plain");
+	// nothing splits this file consistently, so the separator that at least
+	// splits the header wins and the caller gets to report a useful mismatch
+	test("falls back to the separator that splits the header", async () => {
+		const file = new File(["name,age\nAlice,30,Engineer\n"], "data.tsv");
+		expect(await parse_table_file(file)).toEqual({
+			headers: ["name", "age"],
+			values: [["Alice", "30", "Engineer"]]
+		});
+	});
+
+	test("ignores blank lines", async () => {
+		const file = new File(["a,b\n1,2\n\n3,4\n\n"], "data.csv");
+		expect(await parse_table_file(file)).toEqual({
+			headers: ["a", "b"],
+			values: [
+				["1", "2"],
+				["3", "4"]
+			]
+		});
+	});
+
+	test("ignores blank lines in a file with windows line endings", async () => {
+		const file = new File(["a,b\r\n1,2\r\n\r\n"], "data.csv");
+		expect(await parse_table_file(file)).toEqual({
+			headers: ["a", "b"],
+			values: [["1", "2"]]
+		});
+	});
+
+	// excel writes one in front of its csv export. Blob.text() decodes as UTF-8,
+	// which drops it, so this holds as long as the file is read that way
+	test("strips a byte order mark from the first header", async () => {
+		const file = new File(["name,age\nAlice,30\n"], "data.csv");
+		expect(await parse_table_file(file)).toEqual({
+			headers: ["name", "age"],
+			values: [["Alice", "30"]]
+		});
 	});
 
-	test("converts data URI to Blob with correct content", async () => {
-		// "Hello" in base64 is "SGVsbG8="
-		const data_uri = "data:text/plain;base64,SGVsbG8=";
-		const blob = data_uri_to_blob(data_uri);
-		const text = await blob.text();
-		expect(text).toBe("Hello");
+	test("returns nothing for a file that holds only whitespace", async () => {
+		const file = new File(["   \n"], "data.csv");
+		expect(await parse_table_file(file)).toEqual({ headers: [], values: [] });
 	});
 });

package/types.ts

@@ -7,6 +7,7 @@ export interface DataframeEvents {
 	input: never;
 	select: SelectData;
 	edit: EditData;
+	error: string;
 	clear_status: LoadingStatus;
 }