@gradio/dataframe 0.24.4 → 0.24.6

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 {
@@ -11,18 +11,17 @@ export function make_header_id(col: number): string {
 
 export async function copy_table_data(
 	data: TableData,
-	selected_cells: [number, number][] | null
+	selected_cells: [number, number][]
 ): Promise<void> {
 	if (!data || !data.length) return;
 
-	const cells_to_copy =
-		selected_cells ||
-		data.flatMap((row, r) => row.map((_, c) => [r, c] as [number, number]));
-
-	const csv = cells_to_copy.reduce(
+	const csv = selected_cells.reduce(
 		(acc: { [key: string]: { [key: string]: string } }, [row, col]) => {
 			acc[row] = acc[row] || {};
-			const value = String(data[row][col].value);
+			// only the headers are padded out to the column count on the way in, so
+			// a selection can name a cell a short row does not have
+			const cell = data[row]?.[col];
+			const value = cell ? String(cell.value) : "";
 			acc[row][col] =
 				value.includes(",") || value.includes('"') || value.includes("\n")
 					? `"${value.replace(/"/g, '""')}"`
@@ -35,7 +34,11 @@ export async function copy_table_data(
 	const rows = Object.keys(csv).sort((a, b) => +a - +b);
 	if (!rows.length) return;
 
-	const cols = Object.keys(csv[rows[0]]).sort((a, b) => +a - +b);
+	// every column any selected row contributes: taking them from the first row
+	// alone drops the rest of a selection that is not rectangular there
+	const cols = Array.from(
+		new Set(rows.flatMap((r) => Object.keys(csv[r])))
+	).sort((a, b) => +a - +b);
 	const text = rows
 		.map((r) => cols.map((c) => csv[r][c] || "").join(","))
 		.join("\n");
@@ -47,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/selection_utils.test.ts

@@ -70,11 +70,13 @@ describe("is_cell_in_selection", () => {
 
 describe("is_cell_selected", () => {
 	test("returns empty string when cell not selected", () => {
-		expect(is_cell_selected([0, 0], [[1, 1]])).toBe("");
+		expect(is_cell_selected([0, 0], [[1, 1]], null, null)).toBe("");
 	});
 
 	test("returns 'cell-selected' for isolated cell", () => {
-		expect(is_cell_selected([1, 1], [[1, 1]])).toBe("cell-selected");
+		expect(is_cell_selected([1, 1], [[1, 1]], null, null)).toBe(
+			"cell-selected"
+		);
 	});
 
 	test("adds 'no-top' when neighbor above is selected", () => {
@@ -83,7 +85,9 @@ describe("is_cell_selected", () => {
 			[
 				[0, 0],
 				[1, 0]
-			]
+			],
+			0,
+			null
 		);
 		expect(result).toContain("cell-selected");
 		expect(result).toContain("no-top");
@@ -95,19 +99,46 @@ describe("is_cell_selected", () => {
 			[
 				[0, 0],
 				[1, 0]
-			]
+			],
+			null,
+			1
 		);
 		expect(result).toContain("cell-selected");
 		expect(result).toContain("no-bottom");
 	});
 
+	test("merges rows that are adjacent in the view but not in the data", () => {
+		// what a search leaves behind: data rows 0, 2, 4 shown next to each other
+		const selection: CellCoordinate[] = [
+			[0, 0],
+			[2, 0],
+			[4, 0]
+		];
+		const result = is_cell_selected([2, 0], selection, 0, 4);
+		expect(result).toContain("no-top");
+		expect(result).toContain("no-bottom");
+	});
+
+	test("does not merge a selected row the view is not showing next to it", () => {
+		// row 1 is selected but the search has hidden it, so row 2's neighbours on
+		// screen are rows 0 and 4. Comparing row ± 1 instead would merge the top.
+		const selection: CellCoordinate[] = [
+			[1, 0],
+			[2, 0]
+		];
+		const result = is_cell_selected([2, 0], selection, 0, 4);
+		expect(result).toBe("cell-selected");
+	});
+
 	test("adds 'no-left' when neighbor left is selected", () => {
 		const result = is_cell_selected(
 			[0, 1],
 			[
 				[0, 0],
 				[0, 1]
-			]
+			],
+			null,
+			null
 		);
 		expect(result).toContain("cell-selected");
 		expect(result).toContain("no-left");
@@ -119,7 +150,9 @@ describe("is_cell_selected", () => {
 			[
 				[0, 0],
 				[0, 1]
-			]
+			],
+			null,
+			null
 		);
 		expect(result).toContain("cell-selected");
 		expect(result).toContain("no-right");
@@ -133,7 +166,7 @@ describe("is_cell_selected", () => {
 			[1, 0],
 			[1, 1]
 		];
-		const result = is_cell_selected([1, 1], selection);
+		const result = is_cell_selected([1, 1], selection, 0, null);
 		expect(result).toContain("cell-selected");
 		expect(result).toContain("no-top");
 		expect(result).toContain("no-left");

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;
 }