@gradio/dataframe 0.16.5 → 0.17.1

package/shared/utils/table_utils.test.ts

@@ -1,10 +1,10 @@
 import { describe, test, expect } from "vitest";
-import {
-	make_cell_id,
-	make_header_id,
-	process_data,
-	make_headers
-} from "./table_utils";
+import { make_cell_id, make_header_id } from "./table_utils";
+import { process_data, make_headers } from "./data_processing";
+
+function make_id(): string {
+	return Math.random().toString(36).substring(2, 15);
+}
 
 describe("table_utils", () => {
 	describe("id generation", () => {
@@ -20,8 +20,8 @@ describe("table_utils", () => {
 
 		test("generates unique header ids", () => {
 			const id_set = new Set();
-			for (let col = 0; col < 10; col++) {
-				id_set.add(make_header_id(col));
+			for (let i = 0; i < 10; i++) {
+				id_set.add(make_header_id(i));
 			}
 			expect(id_set.size).toBe(10);
 		});
@@ -38,12 +38,9 @@ describe("table_utils", () => {
 					["1", "2"],
 					["3", "4"]
 				],
-				[2, "fixed"],
-				[2, "fixed"],
-				["A", "B"],
-				true,
 				element_refs,
-				data_binding
+				data_binding,
+				make_id
 			);
 
 			expect(test_result[0].map((item) => item.value)).toEqual(["1", "2"]);
@@ -56,12 +53,9 @@ describe("table_utils", () => {
 					["1", "2"],
 					["3", "4"]
 				],
-				[2, "fixed"],
-				[2, "fixed"],
-				["A", "B"],
-				false,
 				element_refs,
-				data_binding
+				data_binding,
+				make_id
 			);
 
 			expect(test_result.length).toBe(2);
@@ -71,44 +65,71 @@ describe("table_utils", () => {
 		});
 
 		test("handles empty data", () => {
-			const test_result = process_data(
-				[],
-				[0, "dynamic"],
-				[0, "dynamic"],
-				[],
-				false,
-				element_refs,
-				data_binding
-			);
+			const test_result = process_data([], element_refs, data_binding, make_id);
 
 			expect(test_result.length).toBe(0);
 		});
 	});
 
 	describe("make_headers", () => {
-		const element_refs: Record<string, { cell: null; input: null }> = {};
+		test("creates headers with ids when headers are provided", () => {
+			const els = {};
+			const headers = ["Name", "Age", "City"];
+			const col_count: [number, "fixed" | "dynamic"] = [3, "fixed"];
 
-		test("adds empty column for row numbers", () => {
-			const test_result = make_headers(
-				["A", "B"],
-				true,
-				[2, "fixed"],
-				element_refs
-			);
+			const result = make_headers(headers, col_count, els, make_id);
 
-			expect(test_result.length).toBe(3);
-			expect(test_result[0].value).toBe("");
-			expect(test_result[1].value).toBe("A");
-			expect(test_result[2].value).toBe("B");
+			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("handles empty headers with fixed columns", () => {
-			const test_result = make_headers([], false, [3, "fixed"], element_refs);
+		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(test_result.length).toBe(3);
-			expect(
-				test_result.every((header) => typeof header.value === "string")
-			).toBe(true);
+			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);
 		});
 	});
 });

package/shared/utils/table_utils.ts

@@ -1,12 +1,4 @@
-import type {
-	Headers,
-	HeadersWithIDs,
-	TableCell,
-	TableData,
-	CountConfig,
-	ElementRefs,
-	DataBinding
-} from "../types";
+import type { Headers, HeadersWithIDs, TableCell, TableData } from "../types";
 import { sort_data } from "./sort_utils";
 import type { SortDirection } from "./sort_utils";
 import { dsvFormat } from "d3-dsv";
@@ -19,77 +11,6 @@ export function make_header_id(col: number): string {
 	return `header-${col}`;
 }
 
-export function process_data(
-	input_values: (string | number)[][],
-	row_count: CountConfig,
-	col_count: CountConfig,
-	headers: Headers,
-	show_row_numbers: boolean,
-	element_refs: ElementRefs,
-	data_binding: DataBinding
-): TableData {
-	const data_row_length = input_values.length;
-	return Array(row_count[1] === "fixed" ? row_count[0] : data_row_length)
-		.fill(0)
-		.map((_, row) => {
-			return Array(
-				col_count[1] === "fixed"
-					? col_count[0]
-					: data_row_length > 0
-						? input_values[0].length
-						: headers.length
-			)
-				.fill(0)
-				.map((_, col) => {
-					const cell_id = make_cell_id(row, col);
-					element_refs[cell_id] = element_refs[cell_id] || {
-						input: null,
-						cell: null
-					};
-					const cell_obj: TableCell = {
-						value: input_values?.[row]?.[col] ?? "",
-						id: cell_id
-					};
-					data_binding[cell_id] = cell_obj;
-					return cell_obj;
-				});
-		});
-}
-
-export function make_headers(
-	input_headers: Headers,
-	show_row_numbers: boolean,
-	col_count: CountConfig,
-	element_refs: ElementRefs
-): HeadersWithIDs[] {
-	let header_list = input_headers || [];
-	if (show_row_numbers) {
-		header_list = ["", ...header_list];
-	}
-	if (col_count[1] === "fixed" && header_list.length < col_count[0]) {
-		const fill_headers = Array(col_count[0] - header_list.length)
-			.fill("")
-			.map((_, i) => `${i + header_list.length}`);
-		header_list = header_list.concat(fill_headers);
-	}
-
-	if (!header_list || header_list.length === 0) {
-		return Array(col_count[0])
-			.fill(0)
-			.map((_, col) => {
-				const header_id = make_header_id(col);
-				element_refs[header_id] = { cell: null, input: null };
-				return { id: header_id, value: JSON.stringify(col + 1) };
-			});
-	}
-
-	return header_list.map((header: string | null, col: number) => {
-		const header_id = make_header_id(col);
-		element_refs[header_id] = { cell: null, input: null };
-		return { id: header_id, value: header ?? "" };
-	});
-}
-
 export function get_max(data: TableData): TableCell[] {
 	if (!data || !data.length) return [];
 	let max = data[0].slice();
@@ -107,10 +28,12 @@ export function sort_table_data(
 	data: TableData,
 	display_value: string[][] | null,
 	styling: string[][] | null,
-	col: number,
-	dir: SortDirection
+	sort_columns: { col: number; direction: SortDirection }[]
 ): void {
-	const indices = sort_data(data, col, dir);
+	if (!sort_columns.length) return;
+	if (!data || !data.length) return;
+
+	const indices = sort_data(data, sort_columns);
 
 	const new_data = indices.map((i: number) => data[i]);
 	data.splice(0, data.length, ...new_data);
@@ -128,9 +51,15 @@ export function sort_table_data(
 
 export async function copy_table_data(
 	data: TableData,
-	selected_cells: [number, number][]
+	selected_cells: [number, number][] | null
 ): Promise<void> {
-	const csv = selected_cells.reduce(
+	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(
 		(acc: { [key: string]: { [key: string]: string } }, [row, col]) => {
 			acc[row] = acc[row] || {};
 			const value = String(data[row][col].value);
@@ -144,6 +73,8 @@ 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);
 	const text = rows
 		.map((r) => cols.map((c) => csv[r][c] || "").join(","))
@@ -152,7 +83,6 @@ export async function copy_table_data(
 	try {
 		await navigator.clipboard.writeText(text);
 	} catch (err) {
-		console.error("Copy failed:", err);
 		throw new Error("Failed to copy to clipboard: " + (err as Error).message);
 	}
 }