@gradio/dataframe 0.22.0 → 0.23.1

package/test/selection_utils.test.ts

@@ -0,0 +1,416 @@
+import { describe, test, expect } from "vitest";
+import {
+	is_cell_in_selection,
+	is_cell_selected,
+	get_range_selection,
+	handle_selection,
+	handle_delete_key,
+	should_show_cell_menu,
+	get_next_cell_coordinates,
+	move_cursor,
+	get_current_indices,
+	select_column,
+	select_row
+} from "../shared/utils/selection_utils";
+import type { CellCoordinate } from "../shared/types";
+
+// helper: create a grid of CellData for move_cursor / get_next_cell_coordinates
+function make_grid(rows: number, cols: number) {
+	return Array.from({ length: rows }, (_, r) =>
+		Array.from({ length: cols }, (_, c) => ({
+			id: `cell-${r}-${c}`,
+			value: `${r},${c}`
+		}))
+	);
+}
+
+// helper: create a minimal KeyboardEvent-like object
+function make_key_event(
+	key: string,
+	opts: { metaKey?: boolean; ctrlKey?: boolean; shiftKey?: boolean } = {}
+) {
+	return {
+		key,
+		metaKey: opts.metaKey ?? false,
+		ctrlKey: opts.ctrlKey ?? false,
+		shiftKey: opts.shiftKey ?? false
+	} as KeyboardEvent;
+}
+
+describe("is_cell_in_selection", () => {
+	test("returns true when cell is in selection", () => {
+		expect(
+			is_cell_in_selection(
+				[1, 2],
+				[
+					[0, 0],
+					[1, 2],
+					[3, 4]
+				]
+			)
+		).toBe(true);
+	});
+
+	test("returns false when cell is not in selection", () => {
+		expect(
+			is_cell_in_selection(
+				[1, 2],
+				[
+					[0, 0],
+					[3, 4]
+				]
+			)
+		).toBe(false);
+	});
+
+	test("handles empty selection", () => {
+		expect(is_cell_in_selection([0, 0], [])).toBe(false);
+	});
+});
+
+describe("is_cell_selected", () => {
+	test("returns empty string when cell not selected", () => {
+		expect(is_cell_selected([0, 0], [[1, 1]])).toBe("");
+	});
+
+	test("returns 'cell-selected' for isolated cell", () => {
+		expect(is_cell_selected([1, 1], [[1, 1]])).toBe("cell-selected");
+	});
+
+	test("adds 'no-top' when neighbor above is selected", () => {
+		const result = is_cell_selected(
+			[1, 0],
+			[
+				[0, 0],
+				[1, 0]
+			]
+		);
+		expect(result).toContain("cell-selected");
+		expect(result).toContain("no-top");
+	});
+
+	test("adds 'no-bottom' when neighbor below is selected", () => {
+		const result = is_cell_selected(
+			[0, 0],
+			[
+				[0, 0],
+				[1, 0]
+			]
+		);
+		expect(result).toContain("cell-selected");
+		expect(result).toContain("no-bottom");
+	});
+
+	test("adds 'no-left' when neighbor left is selected", () => {
+		const result = is_cell_selected(
+			[0, 1],
+			[
+				[0, 0],
+				[0, 1]
+			]
+		);
+		expect(result).toContain("cell-selected");
+		expect(result).toContain("no-left");
+	});
+
+	test("adds 'no-right' when neighbor right is selected", () => {
+		const result = is_cell_selected(
+			[0, 0],
+			[
+				[0, 0],
+				[0, 1]
+			]
+		);
+		expect(result).toContain("cell-selected");
+		expect(result).toContain("no-right");
+	});
+
+	test("combines multiple neighbor flags for block selection", () => {
+		// 2x2 block: center-ish cell [1,1] in a block [[0,0],[0,1],[1,0],[1,1]]
+		const selection: CellCoordinate[] = [
+			[0, 0],
+			[0, 1],
+			[1, 0],
+			[1, 1]
+		];
+		const result = is_cell_selected([1, 1], selection);
+		expect(result).toContain("cell-selected");
+		expect(result).toContain("no-top");
+		expect(result).toContain("no-left");
+		// no neighbor below or right
+		expect(result).not.toContain("no-bottom");
+		expect(result).not.toContain("no-right");
+	});
+});
+
+describe("get_range_selection", () => {
+	test("returns rectangular range with anchor first", () => {
+		const result = get_range_selection([0, 0], [2, 2]);
+		// anchor [0,0] should be first
+		expect(result[0]).toEqual([0, 0]);
+		// should contain all 9 cells in the 3x3 range
+		expect(result).toHaveLength(9);
+		expect(result).toContainEqual([1, 1]);
+		expect(result).toContainEqual([2, 2]);
+	});
+
+	test("handles reversed direction (end before start)", () => {
+		const result = get_range_selection([2, 2], [0, 0]);
+		expect(result[0]).toEqual([2, 2]);
+		expect(result).toHaveLength(9);
+		expect(result).toContainEqual([0, 0]);
+	});
+
+	test("single cell range returns just the anchor", () => {
+		const result = get_range_selection([1, 1], [1, 1]);
+		expect(result).toEqual([[1, 1]]);
+	});
+});
+
+describe("handle_selection", () => {
+	test("plain click returns single cell", () => {
+		const result = handle_selection([2, 3], [[0, 0]], {
+			shiftKey: false,
+			metaKey: false,
+			ctrlKey: false
+		});
+		expect(result).toEqual([[2, 3]]);
+	});
+
+	test("shift+click returns range from last selected", () => {
+		const result = handle_selection([2, 2], [[0, 0]], {
+			shiftKey: true,
+			metaKey: false,
+			ctrlKey: false
+		});
+		// range from [0,0] to [2,2] = 9 cells
+		expect(result).toHaveLength(9);
+	});
+
+	test("cmd/ctrl+click adds cell to selection", () => {
+		const result = handle_selection([1, 1], [[0, 0]], {
+			shiftKey: false,
+			metaKey: true,
+			ctrlKey: false
+		});
+		expect(result).toEqual([
+			[0, 0],
+			[1, 1]
+		]);
+	});
+
+	test("cmd/ctrl+click removes already-selected cell", () => {
+		const result = handle_selection(
+			[0, 0],
+			[
+				[0, 0],
+				[1, 1]
+			],
+			{
+				shiftKey: false,
+				metaKey: true,
+				ctrlKey: false
+			}
+		);
+		expect(result).toEqual([[1, 1]]);
+	});
+});
+
+describe("handle_delete_key", () => {
+	test("clears values of selected cells", () => {
+		const data = [
+			[
+				{ id: "0-0", value: "a" },
+				{ id: "0-1", value: "b" }
+			],
+			[
+				{ id: "1-0", value: "c" },
+				{ id: "1-1", value: "d" }
+			]
+		];
+		const result = handle_delete_key(data, [
+			[0, 0],
+			[1, 1]
+		]);
+		expect(result[0][0].value).toBe("");
+		expect(result[1][1].value).toBe("");
+	});
+
+	test("leaves unselected cells unchanged", () => {
+		const data = [
+			[
+				{ id: "0-0", value: "a" },
+				{ id: "0-1", value: "b" }
+			]
+		];
+		const result = handle_delete_key(data, [[0, 0]]);
+		expect(result[0][1].value).toBe("b");
+	});
+
+	test("handles out-of-bounds gracefully", () => {
+		const data = [
+			[
+				{ id: "0-0", value: "a" },
+				{ id: "0-1", value: "b" }
+			]
+		];
+		// should not throw
+		const result = handle_delete_key(data, [[5, 5]]);
+		expect(result[0][0].value).toBe("a");
+		expect(result[0][1].value).toBe("b");
+	});
+});
+
+describe("should_show_cell_menu", () => {
+	test("true when editable, single cell selected, and coords match", () => {
+		expect(should_show_cell_menu([1, 2], [[1, 2]], true)).toBe(true);
+	});
+
+	test("false when not editable", () => {
+		expect(should_show_cell_menu([1, 2], [[1, 2]], false)).toBe(false);
+	});
+
+	test("false when multiple cells selected", () => {
+		expect(
+			should_show_cell_menu(
+				[1, 2],
+				[
+					[1, 2],
+					[1, 3]
+				],
+				true
+			)
+		).toBe(false);
+	});
+
+	test("false when coords don't match", () => {
+		expect(should_show_cell_menu([0, 0], [[1, 2]], true)).toBe(false);
+	});
+});
+
+describe("get_next_cell_coordinates", () => {
+	const grid = make_grid(3, 3);
+
+	test("moves right to next column", () => {
+		expect(get_next_cell_coordinates([0, 0], grid, false)).toEqual([0, 1]);
+	});
+
+	test("wraps to next row at end of row", () => {
+		expect(get_next_cell_coordinates([0, 2], grid, false)).toEqual([1, 0]);
+	});
+
+	test("shift moves left to previous column", () => {
+		expect(get_next_cell_coordinates([0, 1], grid, true)).toEqual([0, 0]);
+	});
+
+	test("shift wraps to previous row at start of row", () => {
+		expect(get_next_cell_coordinates([1, 0], grid, true)).toEqual([0, 2]);
+	});
+
+	test("returns false at grid boundary", () => {
+		// forward past last cell
+		expect(get_next_cell_coordinates([2, 2], grid, false)).toBe(false);
+		// backward past first cell
+		expect(get_next_cell_coordinates([0, 0], grid, true)).toBe(false);
+	});
+});
+
+describe("move_cursor", () => {
+	const grid = make_grid(4, 4);
+
+	test("ArrowRight moves one column right", () => {
+		expect(move_cursor(make_key_event("ArrowRight"), [1, 1], grid)).toEqual([
+			1, 2
+		]);
+	});
+
+	test("ArrowLeft moves one column left", () => {
+		expect(move_cursor(make_key_event("ArrowLeft"), [1, 1], grid)).toEqual([
+			1, 0
+		]);
+	});
+
+	test("ArrowDown moves one row down", () => {
+		expect(move_cursor(make_key_event("ArrowDown"), [1, 1], grid)).toEqual([
+			2, 1
+		]);
+	});
+
+	test("ArrowUp moves one row up", () => {
+		expect(move_cursor(make_key_event("ArrowUp"), [1, 1], grid)).toEqual([
+			0, 1
+		]);
+	});
+
+	test("Cmd+ArrowRight jumps to last column", () => {
+		expect(
+			move_cursor(make_key_event("ArrowRight", { metaKey: true }), [1, 0], grid)
+		).toEqual([1, 3]);
+	});
+
+	test("Cmd+ArrowLeft jumps to first column", () => {
+		expect(
+			move_cursor(make_key_event("ArrowLeft", { metaKey: true }), [1, 3], grid)
+		).toEqual([1, 0]);
+	});
+
+	test("Cmd+ArrowDown jumps to last row", () => {
+		expect(
+			move_cursor(make_key_event("ArrowDown", { metaKey: true }), [0, 1], grid)
+		).toEqual([3, 1]);
+	});
+
+	test("Cmd+ArrowUp jumps to first row", () => {
+		expect(
+			move_cursor(make_key_event("ArrowUp", { metaKey: true }), [3, 1], grid)
+		).toEqual([0, 1]);
+	});
+
+	test("returns false at grid boundary", () => {
+		expect(move_cursor(make_key_event("ArrowUp"), [0, 0], grid)).toBe(false);
+		expect(move_cursor(make_key_event("ArrowLeft"), [0, 0], grid)).toBe(false);
+		expect(move_cursor(make_key_event("ArrowDown"), [3, 3], grid)).toBe(false);
+		expect(move_cursor(make_key_event("ArrowRight"), [3, 3], grid)).toBe(false);
+	});
+});
+
+describe("get_current_indices", () => {
+	const grid = make_grid(3, 3);
+
+	test("finds cell by ID", () => {
+		expect(get_current_indices("cell-1-2", grid)).toEqual([1, 2]);
+	});
+
+	test("returns [-1, -1] when ID not found", () => {
+		expect(get_current_indices("nonexistent", grid)).toEqual([-1, -1]);
+	});
+});
+
+describe("select_column", () => {
+	test("selects all rows for given column", () => {
+		const data = [
+			[1, 2, 3],
+			[4, 5, 6],
+			[7, 8, 9]
+		];
+		expect(select_column(data, 1)).toEqual([
+			[0, 1],
+			[1, 1],
+			[2, 1]
+		]);
+	});
+});
+
+describe("select_row", () => {
+	test("selects all columns for given row", () => {
+		const data = [
+			[1, 2, 3],
+			[4, 5, 6]
+		];
+		expect(select_row(data, 0)).toEqual([
+			[0, 0],
+			[0, 1],
+			[0, 2]
+		]);
+	});
+});

package/test/table_utils.test.ts

@@ -1,12 +1,12 @@
 import { describe, test, expect } from "vitest";
-import { make_cell_id, make_header_id } from "../shared/utils/table_utils";
-import { process_data, make_headers } from "../shared/utils/data_processing";
+import {
+	make_cell_id,
+	make_header_id,
+	guess_delimiter,
+	data_uri_to_blob
+} from "../shared/utils/table_utils";
 import { cast_value_to_type } from "../shared/utils/utils";
 
-function make_id(): string {
-	return Math.random().toString(36).substring(2, 15);
-}
-
 describe("table_utils", () => {
 	describe("id generation", () => {
 		test("generates unique cell ids", () => {
@@ -27,112 +27,6 @@ describe("table_utils", () => {
 			expect(id_set.size).toBe(10);
 		});
 	});
-
-	describe("process_data", () => {
-		const element_refs: Record<string, { cell: null; input: null }> = {};
-		const data_binding: Record<string, { value: string | number; id: string }> =
-			{};
-
-		test("processes data with row numbers", () => {
-			const test_result = process_data(
-				[
-					["1", "2"],
-					["3", "4"]
-				],
-				element_refs,
-				data_binding,
-				make_id
-			);
-
-			expect(test_result[0].map((item) => item.value)).toEqual(["1", "2"]);
-			expect(test_result).toHaveLength(2);
-		});
-
-		test("processes data without row numbers", () => {
-			const test_result = process_data(
-				[
-					["1", "2"],
-					["3", "4"]
-				],
-				element_refs,
-				data_binding,
-				make_id
-			);
-
-			expect(test_result.length).toBe(2);
-			expect(test_result[0].length).toBe(2);
-			expect(test_result[0][0].value).toBe("1");
-			expect(test_result[0][1].value).toBe("2");
-		});
-
-		test("handles empty data", () => {
-			const test_result = process_data([], element_refs, data_binding, make_id);
-
-			expect(test_result.length).toBe(0);
-		});
-	});
-
-	describe("make_headers", () => {
-		test("creates headers with ids when headers are provided", () => {
-			const els = {};
-			const headers = ["Name", "Age", "City"];
-			const col_count: [number, "fixed" | "dynamic"] = [3, "fixed"];
-
-			const result = make_headers(headers, col_count, els, make_id);
-
-			expect(result.length).toBe(3);
-			expect(result[0].value).toBe("Name");
-			expect(result[1].value).toBe("Age");
-			expect(result[2].value).toBe("City");
-			expect(result[0].id).toBeDefined();
-			expect(result[1].id).toBeDefined();
-			expect(result[2].id).toBeDefined();
-			expect(Object.keys(els).length).toBe(3);
-		});
-
-		test("fills missing headers when col_count is fixed", () => {
-			const els = {};
-			const headers = ["Name", "Age"];
-			const col_count: [number, "fixed" | "dynamic"] = [4, "fixed"];
-
-			const result = make_headers(headers, col_count, els, make_id);
-
-			expect(result.length).toBe(4);
-			expect(result[0].value).toBe("Name");
-			expect(result[1].value).toBe("Age");
-			expect(result[2].value).toBe("2");
-			expect(result[3].value).toBe("3");
-			expect(Object.keys(els).length).toBe(4);
-		});
-
-		test("creates default headers when no headers are provided", () => {
-			const els = {};
-			const headers = [];
-			const col_count: [number, "fixed" | "dynamic"] = [3, "fixed"];
-
-			const result = make_headers(headers, col_count, els, make_id);
-
-			expect(result.length).toBe(3);
-			expect(result[0].value).toBe("0");
-			expect(result[1].value).toBe("1");
-			expect(result[2].value).toBe("2");
-			expect(Object.keys(els).length).toBe(3);
-		});
-
-		test("handles null values in headers", () => {
-			const els = {};
-			const headers = ["Name", null, "City"] as any;
-			const col_count: [number, "fixed" | "dynamic"] = [3, "fixed"];
-
-			const result = make_headers(headers, col_count, els, make_id);
-
-			expect(result.length).toBe(3);
-			expect(result[0].value).toBe("Name");
-			expect(result[1].value).toBe("");
-			expect(result[2].value).toBe("City");
-			expect(Object.keys(els).length).toBe(3);
-		});
-	});
 });
 
 describe("cast_value_to_type", () => {
@@ -174,3 +68,42 @@ describe("cast_value_to_type", () => {
 		expect(cast_value_to_type(undefined, "str")).toBe(undefined);
 	});
 });
+
+describe("guess_delimiter", () => {
+	test("detects comma delimiter", () => {
+		const csv = "a,b,c\n1,2,3\n4,5,6";
+		expect(guess_delimiter(csv, [",", "\t"])).toContain(",");
+	});
+
+	test("detects tab delimiter", () => {
+		const tsv = "a\tb\tc\n1\t2\t3\n4\t5\t6";
+		expect(guess_delimiter(tsv, [",", "\t"])).toContain("\t");
+	});
+
+	test("returns empty array when no consistent delimiter", () => {
+		const text = "abc\ndef\nghi";
+		expect(guess_delimiter(text, [",", "\t"])).toEqual([]);
+	});
+
+	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(",");
+	});
+});
+
+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");
+	});
+
+	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");
+	});
+});

package/types.ts

@@ -0,0 +1,34 @@
+import type { SelectData } from "@gradio/utils";
+import type { LoadingStatus } from "@gradio/statustracker";
+import type { DataframeValue, Datatype, EditData } from "./shared/utils/utils";
+
+export interface DataframeEvents {
+	change: DataframeValue;
+	input: never;
+	select: SelectData;
+	edit: EditData;
+	clear_status: LoadingStatus;
+}
+
+export interface DataframeProps {
+	value: DataframeValue;
+	col_count: [number, "fixed" | "dynamic"];
+	row_count: [number, "fixed" | "dynamic"];
+	wrap: boolean;
+	datatype: Datatype | Datatype[];
+	line_breaks: boolean;
+	column_widths: string[];
+	latex_delimiters: {
+		left: string;
+		right: string;
+		display: boolean;
+	}[];
+	max_height: number;
+	buttons: string[] | null;
+	max_chars: number | undefined;
+	show_row_numbers: boolean;
+	show_search: "none" | "search" | "filter";
+	pinned_columns: number;
+	static_columns: (string | number)[];
+	fullscreen: boolean;
+}