@gradio/dataframe 0.14.0 → 0.16.0

package/shared/utils/menu_utils.ts

@@ -0,0 +1,115 @@
+export function toggle_header_menu(
+	event: MouseEvent,
+	col: number,
+	active_header_menu: { col: number; x: number; y: number } | null,
+	set_active_header_menu: (
+		menu: { col: number; x: number; y: number } | null
+	) => void
+): void {
+	event.stopPropagation();
+	if (active_header_menu && active_header_menu.col === col) {
+		set_active_header_menu(null);
+	} else {
+		const header = (event.target as HTMLElement).closest("th");
+		if (header) {
+			const rect = header.getBoundingClientRect();
+			set_active_header_menu({ col, x: rect.right, y: rect.bottom });
+		}
+	}
+}
+
+export function toggle_cell_menu(
+	event: MouseEvent,
+	row: number,
+	col: number,
+	active_cell_menu: { row: number; col: number; x: number; y: number } | null,
+	set_active_cell_menu: (
+		menu: { row: number; col: number; x: number; y: number } | null
+	) => void
+): void {
+	event.stopPropagation();
+	if (
+		active_cell_menu &&
+		active_cell_menu.row === row &&
+		active_cell_menu.col === col
+	) {
+		set_active_cell_menu(null);
+	} else {
+		const cell = (event.target as HTMLElement).closest("td");
+		if (cell) {
+			const rect = cell.getBoundingClientRect();
+			set_active_cell_menu({ row, col, x: rect.right, y: rect.bottom });
+		}
+	}
+}
+
+export function add_row_at(
+	index: number,
+	position: "above" | "below",
+	add_row: (index?: number) => void,
+	clear_menus: () => void
+): void {
+	const row_index = position === "above" ? index : index + 1;
+	add_row(row_index);
+	clear_menus();
+}
+
+export function add_col_at(
+	index: number,
+	position: "left" | "right",
+	add_col: (index?: number) => void,
+	clear_menus: () => void
+): void {
+	const col_index = position === "left" ? index : index + 1;
+	add_col(col_index);
+	clear_menus();
+}
+
+export function delete_row_at(
+	index: number,
+	delete_row: (index: number) => void,
+	clear_menus: () => void
+): void {
+	delete_row(index);
+	clear_menus();
+}
+
+export function delete_col_at(
+	index: number,
+	delete_col: (index: number) => void,
+	clear_menus: () => void
+): void {
+	delete_col(index);
+	clear_menus();
+}
+
+export function toggle_header_button(
+	col: number,
+	active_button: { type: "header" | "cell"; row?: number; col: number } | null,
+	set_active_button: (
+		button: { type: "header" | "cell"; row?: number; col: number } | null
+	) => void
+): void {
+	set_active_button(
+		active_button?.type === "header" && active_button.col === col
+			? null
+			: { type: "header", col }
+	);
+}
+
+export function toggle_cell_button(
+	row: number,
+	col: number,
+	active_button: { type: "header" | "cell"; row?: number; col: number } | null,
+	set_active_button: (
+		button: { type: "header" | "cell"; row?: number; col: number } | null
+	) => void
+): void {
+	set_active_button(
+		active_button?.type === "cell" &&
+			active_button.row === row &&
+			active_button.col === col
+			? null
+			: { type: "cell", row, col }
+	);
+}

package/shared/utils/sort_utils.test.ts

@@ -0,0 +1,71 @@
+import { describe, test, expect } from "vitest";
+import { get_sort_status, sort_data } from "./sort_utils";
+
+describe("sort_utils", () => {
+	describe("get_sort_status", () => {
+		const headers = ["A", "B", "C"];
+
+		test("returns none when no sort is active", () => {
+			expect(get_sort_status("A", undefined, undefined, headers)).toBe("none");
+		});
+
+		test("returns ascending when column is sorted ascending", () => {
+			expect(get_sort_status("A", 0, "asc", headers)).toBe("ascending");
+		});
+
+		test("returns descending when column is sorted descending", () => {
+			expect(get_sort_status("B", 1, "des", headers)).toBe("descending");
+		});
+
+		test("returns none for non-matching column", () => {
+			expect(get_sort_status("A", 1, "asc", headers)).toBe("none");
+		});
+	});
+
+	describe("sort_data", () => {
+		const data = [
+			[
+				{ id: "1", value: "B" },
+				{ id: "2", value: 2 }
+			],
+			[
+				{ id: "3", value: "A" },
+				{ id: "4", value: 1 }
+			],
+			[
+				{ id: "5", value: "C" },
+				{ id: "6", value: 3 }
+			]
+		];
+
+		test("sorts strings ascending", () => {
+			const indices = sort_data(data, 0, "asc");
+			expect(indices).toEqual([1, 0, 2]); // A, B, C
+		});
+
+		test("sorts numbers ascending", () => {
+			const indices = sort_data(data, 1, "asc");
+			expect(indices).toEqual([1, 0, 2]); // 1, 2, 3
+		});
+
+		test("sorts strings descending", () => {
+			const indices = sort_data(data, 0, "des");
+			expect(indices).toEqual([2, 0, 1]); // C, B, A
+		});
+
+		test("returns original order when sort params are invalid", () => {
+			const indices = sort_data(data, undefined, undefined);
+			expect(indices).toEqual([0, 1, 2]);
+		});
+
+		test("handles empty data", () => {
+			const indices = sort_data([], 0, "asc");
+			expect(indices).toEqual([]);
+		});
+
+		test("handles invalid column index", () => {
+			const indices = sort_data(data, 999, "asc");
+			expect(indices).toEqual([0, 1, 2]);
+		});
+	});
+});

package/shared/utils/sort_utils.ts

@@ -0,0 +1,55 @@
+import type { Headers } from "../types";
+
+export type SortDirection = "asc" | "des";
+
+export function get_sort_status(
+	name: string,
+	sort_by: number | undefined,
+	direction: SortDirection | undefined,
+	headers: Headers
+): "none" | "ascending" | "descending" {
+	if (typeof sort_by !== "number") return "none";
+	if (sort_by < 0 || sort_by >= headers.length) return "none";
+	if (headers[sort_by] === name) {
+		if (direction === "asc") return "ascending";
+		if (direction === "des") return "descending";
+	}
+	return "none";
+}
+
+export function sort_data(
+	data: { id: string; value: string | number }[][],
+	sort_by: number | undefined,
+	sort_direction: SortDirection | undefined
+): number[] {
+	if (!data || !data.length || !data[0]) {
+		return [];
+	}
+
+	if (
+		typeof sort_by === "number" &&
+		sort_direction &&
+		sort_by >= 0 &&
+		sort_by < data[0].length
+	) {
+		const row_indices = [...Array(data.length)].map((_, i) => i);
+		row_indices.sort((row_a_idx, row_b_idx) => {
+			const row_a = data[row_a_idx];
+			const row_b = data[row_b_idx];
+			if (
+				!row_a ||
+				!row_b ||
+				sort_by >= row_a.length ||
+				sort_by >= row_b.length
+			)
+				return 0;
+
+			const val_a = row_a[sort_by].value;
+			const val_b = row_b[sort_by].value;
+			const comparison = val_a < val_b ? -1 : val_a > val_b ? 1 : 0;
+			return sort_direction === "asc" ? comparison : -comparison;
+		});
+		return row_indices;
+	}
+	return [...Array(data.length)].map((_, i) => i);
+}

package/shared/utils/table_utils.test.ts

@@ -0,0 +1,114 @@
+import { describe, test, expect } from "vitest";
+import {
+	make_cell_id,
+	make_header_id,
+	process_data,
+	make_headers
+} from "./table_utils";
+
+describe("table_utils", () => {
+	describe("id generation", () => {
+		test("generates unique cell ids", () => {
+			const id_set = new Set();
+			for (let row = 0; row < 10; row++) {
+				for (let col = 0; col < 10; col++) {
+					id_set.add(make_cell_id(row, col));
+				}
+			}
+			expect(id_set.size).toBe(100);
+		});
+
+		test("generates unique header ids", () => {
+			const id_set = new Set();
+			for (let col = 0; col < 10; col++) {
+				id_set.add(make_header_id(col));
+			}
+			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"]
+				],
+				[2, "fixed"],
+				[2, "fixed"],
+				["A", "B"],
+				true,
+				element_refs,
+				data_binding
+			);
+
+			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"]
+				],
+				[2, "fixed"],
+				[2, "fixed"],
+				["A", "B"],
+				false,
+				element_refs,
+				data_binding
+			);
+
+			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(
+				[],
+				[0, "dynamic"],
+				[0, "dynamic"],
+				[],
+				false,
+				element_refs,
+				data_binding
+			);
+
+			expect(test_result.length).toBe(0);
+		});
+	});
+
+	describe("make_headers", () => {
+		const element_refs: Record<string, { cell: null; input: null }> = {};
+
+		test("adds empty column for row numbers", () => {
+			const test_result = make_headers(
+				["A", "B"],
+				true,
+				[2, "fixed"],
+				element_refs
+			);
+
+			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");
+		});
+
+		test("handles empty headers with fixed columns", () => {
+			const test_result = make_headers([], false, [3, "fixed"], element_refs);
+
+			expect(test_result.length).toBe(3);
+			expect(
+				test_result.every((header) => typeof header.value === "string")
+			).toBe(true);
+		});
+	});
+});

package/shared/utils/table_utils.ts

@@ -0,0 +1,206 @@
+import type {
+	Headers,
+	HeadersWithIDs,
+	TableCell,
+	TableData,
+	CountConfig,
+	ElementRefs,
+	DataBinding
+} from "../types";
+import { sort_data } from "./sort_utils";
+import type { SortDirection } from "./sort_utils";
+import { dsvFormat } from "d3-dsv";
+
+export function make_cell_id(row: number, col: number): string {
+	return `cell-${row}-${col}`;
+}
+
+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();
+	for (let i = 0; i < data.length; i++) {
+		for (let j = 0; j < data[i].length; j++) {
+			if (`${max[j].value}`.length < `${data[i][j].value}`.length) {
+				max[j] = data[i][j];
+			}
+		}
+	}
+	return max;
+}
+
+export function sort_table_data(
+	data: TableData,
+	display_value: string[][] | null,
+	styling: string[][] | null,
+	col: number,
+	dir: SortDirection
+): void {
+	const indices = sort_data(data, col, dir);
+
+	const new_data = indices.map((i: number) => data[i]);
+	data.splice(0, data.length, ...new_data);
+
+	if (display_value) {
+		const new_display = indices.map((i: number) => display_value[i]);
+		display_value.splice(0, display_value.length, ...new_display);
+	}
+
+	if (styling) {
+		const new_styling = indices.map((i: number) => styling[i]);
+		styling.splice(0, styling.length, ...new_styling);
+	}
+}
+
+export async function copy_table_data(
+	data: TableData,
+	selected_cells: [number, number][]
+): Promise<void> {
+	const csv = selected_cells.reduce(
+		(acc: { [key: string]: { [key: string]: string } }, [row, col]) => {
+			acc[row] = acc[row] || {};
+			const value = String(data[row][col].value);
+			acc[row][col] =
+				value.includes(",") || value.includes('"') || value.includes("\n")
+					? `"${value.replace(/"/g, '""')}"`
+					: value;
+			return acc;
+		},
+		{}
+	);
+
+	const rows = Object.keys(csv).sort((a, b) => +a - +b);
+	const cols = Object.keys(csv[rows[0]]).sort((a, b) => +a - +b);
+	const text = rows
+		.map((r) => cols.map((c) => csv[r][c] || "").join(","))
+		.join("\n");
+
+	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);
+	}
+}
+
+// File Import/Export
+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 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: (string | number)[][]) => 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);
+}

package/dist/shared/table_utils.d.ts

@@ -1,6 +0,0 @@
-import type { HeadersWithIDs } from "./utils";
-export type TableData = {
-    value: string | number;
-    id: string;
-}[][];
-export declare function copy_table_data(data: TableData, headers?: HeadersWithIDs): Promise<void>;

package/dist/shared/table_utils.js

@@ -1,27 +0,0 @@
-export async function copy_table_data(data, headers) {
-    const header_row = headers
-        ? headers.map((h) => String(h.value)).join(",")
-        : "";
-    const table_data = data
-        .map((row) => row.map((cell) => String(cell.value)).join(","))
-        .join("\n");
-    const all_data = header_row ? `${header_row}\n${table_data}` : table_data;
-    try {
-        if ("clipboard" in navigator) {
-            await navigator.clipboard.writeText(all_data);
-        }
-        else {
-            const textArea = document.createElement("textarea");
-            textArea.value = all_data;
-            textArea.style.position = "absolute";
-            textArea.style.left = "-999999px";
-            document.body.prepend(textArea);
-            textArea.select();
-            document.execCommand("copy");
-            textArea.remove();
-        }
-    }
-    catch (error) {
-        console.error("Failed to copy table data:", error);
-    }
-}

package/shared/table_utils.ts

@@ -1,38 +0,0 @@
-import type { HeadersWithIDs } from "./utils";
-
-export type TableData = {
-	value: string | number;
-	id: string;
-}[][];
-
-export async function copy_table_data(
-	data: TableData,
-	headers?: HeadersWithIDs
-): Promise<void> {
-	const header_row = headers
-		? headers.map((h) => String(h.value)).join(",")
-		: "";
-	const table_data = data
-		.map((row) => row.map((cell) => String(cell.value)).join(","))
-		.join("\n");
-
-	const all_data = header_row ? `${header_row}\n${table_data}` : table_data;
-
-	try {
-		if ("clipboard" in navigator) {
-			await navigator.clipboard.writeText(all_data);
-		} else {
-			const textArea = document.createElement("textarea");
-			textArea.value = all_data;
-			textArea.style.position = "absolute";
-			textArea.style.left = "-999999px";
-			document.body.prepend(textArea);
-			textArea.select();
-
-			document.execCommand("copy");
-			textArea.remove();
-		}
-	} catch (error) {
-		console.error("Failed to copy table data:", error);
-	}
-}