@gradio/dataframe 0.15.0 → 0.16.1

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,12 +0,0 @@
-import type { HeadersWithIDs } from "./utils";
-import type { CellCoordinate } from "./selection_utils";
-export type TableData = {
-    value: string | number;
-    id: string;
-}[][];
-export declare function get_max(_d: TableData): TableData[0];
-export declare function guess_delimiter(text: string, possibleDelimiters: string[]): string[];
-export declare function data_uri_to_blob(data_uri: string): Blob;
-export declare function copy_table_data(data: TableData, headers?: HeadersWithIDs, selected_cells?: CellCoordinate[]): Promise<void>;
-export declare function blob_to_string(blob: Blob, col_count: [number, "fixed" | "dynamic"], make_headers: (head: string[]) => HeadersWithIDs, set_values: (values: (string | number)[][]) => void): void;
-export declare function handle_file_upload(data_uri: string, col_count: [number, "fixed" | "dynamic"], make_headers: (head: string[]) => HeadersWithIDs, set_values: (values: (string | number)[][]) => void): void;

package/dist/shared/table_utils.js

@@ -1,113 +0,0 @@
-import { dsvFormat } from "d3-dsv";
-export function get_max(_d) {
-    if (!_d || _d.length === 0 || !_d[0])
-        return [];
-    let max = _d[0].slice();
-    for (let i = 0; i < _d.length; i++) {
-        for (let j = 0; j < _d[i].length; j++) {
-            if (`${max[j].value}`.length < `${_d[i][j].value}`.length) {
-                max[j] = _d[i][j];
-            }
-        }
-    }
-    return max;
-}
-export function guess_delimiter(text, possibleDelimiters) {
-    return possibleDelimiters.filter(weedOut);
-    function weedOut(delimiter) {
-        var cache = -1;
-        return text.split("\n").every(checkLength);
-        function checkLength(line) {
-            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) {
-    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 async function copy_table_data(data, headers, selected_cells) {
-    if (!selected_cells || selected_cells.length === 0) {
-        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;
-        await write_to_clipboard(all_data);
-        return;
-    }
-    const min_row = Math.min(...selected_cells.map(([r]) => r));
-    const max_row = Math.max(...selected_cells.map(([r]) => r));
-    const min_col = Math.min(...selected_cells.map(([_, c]) => c));
-    const max_col = Math.max(...selected_cells.map(([_, c]) => c));
-    const selected_data = [];
-    for (let i = min_row; i <= max_row; i++) {
-        const row = [];
-        for (let j = min_col; j <= max_col; j++) {
-            const is_selected = selected_cells.some(([r, c]) => r === i && c === j);
-            row.push(is_selected ? String(data[i][j].value) : "");
-        }
-        selected_data.push(row.join(","));
-    }
-    await write_to_clipboard(selected_data.join("\n"));
-}
-async function write_to_clipboard(csv_data) {
-    try {
-        if ("clipboard" in navigator) {
-            await navigator.clipboard.writeText(csv_data);
-        }
-        else {
-            const textArea = document.createElement("textarea");
-            textArea.value = csv_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);
-    }
-}
-export function blob_to_string(blob, col_count, make_headers, set_values) {
-    const reader = new FileReader();
-    function handle_read(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);
-        make_headers(col_count[1] === "fixed" ? head.slice(0, col_count[0]) : head);
-        set_values(rest);
-        reader.removeEventListener("loadend", handle_read);
-    }
-    reader.addEventListener("loadend", handle_read);
-    reader.readAsText(blob);
-}
-export function handle_file_upload(data_uri, col_count, make_headers, set_values) {
-    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);
-        make_headers(col_count[1] === "fixed" ? head.slice(0, col_count[0]) : head);
-        set_values(rest);
-    });
-    reader.readAsText(blob);
-}