@gradio/dataframe 0.14.0 → 0.15.0

package/shared/selection_utils.ts

@@ -0,0 +1,188 @@
+export type CellCoordinate = [number, number];
+export type CellData = { id: string; value: string | number };
+export type EditingState = false | CellCoordinate;
+
+export function is_cell_selected(
+	cell: CellCoordinate,
+	selected_cells: CellCoordinate[]
+): string {
+	const [row, col] = cell;
+	if (!selected_cells.some(([r, c]) => r === row && c === col)) return "";
+
+	const up = selected_cells.some(([r, c]) => r === row - 1 && c === col);
+	const down = selected_cells.some(([r, c]) => r === row + 1 && c === col);
+	const left = selected_cells.some(([r, c]) => r === row && c === col - 1);
+	const right = selected_cells.some(([r, c]) => r === row && c === col + 1);
+
+	return `cell-selected${up ? " no-top" : ""}${down ? " no-bottom" : ""}${left ? " no-left" : ""}${right ? " no-right" : ""}`;
+}
+
+export function get_range_selection(
+	start: CellCoordinate,
+	end: CellCoordinate
+): CellCoordinate[] {
+	const [start_row, start_col] = start;
+	const [end_row, end_col] = end;
+	const min_row = Math.min(start_row, end_row);
+	const max_row = Math.max(start_row, end_row);
+	const min_col = Math.min(start_col, end_col);
+	const max_col = Math.max(start_col, end_col);
+
+	const cells: CellCoordinate[] = [];
+	for (let i = min_row; i <= max_row; i++) {
+		for (let j = min_col; j <= max_col; j++) {
+			cells.push([i, j]);
+		}
+	}
+	return cells;
+}
+
+export function handle_selection(
+	current: CellCoordinate,
+	selected_cells: CellCoordinate[],
+	event: { shiftKey: boolean; metaKey: boolean; ctrlKey: boolean }
+): CellCoordinate[] {
+	if (event.shiftKey && selected_cells.length > 0) {
+		return get_range_selection(
+			selected_cells[selected_cells.length - 1],
+			current
+		);
+	}
+
+	if (event.metaKey || event.ctrlKey) {
+		const index = selected_cells.findIndex(
+			([r, c]) => r === current[0] && c === current[1]
+		);
+		if (index === -1) {
+			return [...selected_cells, current];
+		}
+		return selected_cells.filter((_, i) => i !== index);
+	}
+
+	return [current];
+}
+
+export function handle_delete_key(
+	data: CellData[][],
+	selected_cells: CellCoordinate[]
+): CellData[][] {
+	const new_data = data.map((row) => [...row]);
+	selected_cells.forEach(([row, col]) => {
+		if (new_data[row] && new_data[row][col]) {
+			new_data[row][col] = { ...new_data[row][col], value: "" };
+		}
+	});
+	return new_data;
+}
+
+export function handle_editing_state(
+	current: CellCoordinate,
+	editing: EditingState,
+	selected_cells: CellCoordinate[],
+	editable: boolean
+): EditingState {
+	const [row, col] = current;
+	if (!editable) return false;
+
+	if (editing && editing[0] === row && editing[1] === col) return editing;
+
+	if (
+		selected_cells.length === 1 &&
+		selected_cells[0][0] === row &&
+		selected_cells[0][1] === col
+	) {
+		return [row, col];
+	}
+
+	return false;
+}
+
+export function should_show_cell_menu(
+	cell: CellCoordinate,
+	selected_cells: CellCoordinate[],
+	editable: boolean
+): boolean {
+	const [row, col] = cell;
+	return (
+		editable &&
+		selected_cells.length === 1 &&
+		selected_cells[0][0] === row &&
+		selected_cells[0][1] === col
+	);
+}
+
+export function get_next_cell_coordinates(
+	current: CellCoordinate,
+	data: CellData[][],
+	shift_key: boolean
+): CellCoordinate | false {
+	const [row, col] = current;
+	const direction = shift_key ? -1 : 1;
+
+	if (data[row]?.[col + direction]) {
+		return [row, col + direction];
+	}
+
+	const next_row = row + (direction > 0 ? 1 : 0);
+	const prev_row = row + (direction < 0 ? -1 : 0);
+
+	if (direction > 0 && data[next_row]?.[0]) {
+		return [next_row, 0];
+	}
+
+	if (direction < 0 && data[prev_row]?.[data[0].length - 1]) {
+		return [prev_row, data[0].length - 1];
+	}
+
+	return false;
+}
+
+export function move_cursor(
+	key: "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp",
+	current_coords: CellCoordinate,
+	data: CellData[][]
+): CellCoordinate | false {
+	const dir = {
+		ArrowRight: [0, 1],
+		ArrowLeft: [0, -1],
+		ArrowDown: [1, 0],
+		ArrowUp: [-1, 0]
+	}[key];
+
+	const i = current_coords[0] + dir[0];
+	const j = current_coords[1] + dir[1];
+
+	if (i < 0 && j <= 0) {
+		return false;
+	}
+
+	const is_data = data[i]?.[j];
+	if (is_data) {
+		return [i, j];
+	}
+	return false;
+}
+
+export function get_current_indices(
+	id: string,
+	data: CellData[][]
+): [number, number] {
+	return data.reduce(
+		(acc, arr, i) => {
+			const j = arr.reduce(
+				(_acc, _data, k) => (id === _data.id ? k : _acc),
+				-1
+			);
+			return j === -1 ? acc : [i, j];
+		},
+		[-1, -1]
+	);
+}
+
+export function handle_click_outside(
+	event: Event,
+	parent: HTMLElement
+): boolean {
+	const [trigger] = event.composedPath() as HTMLElement[];
+	return !parent.contains(trigger);
+}

package/shared/table_utils.ts

@@ -1,29 +1,98 @@
 import type { HeadersWithIDs } from "./utils";
+import type { CellCoordinate } from "./selection_utils";
+import { dsvFormat } from "d3-dsv";
 
 export type TableData = {
 	value: string | number;
 	id: string;
 }[][];
 
+export function get_max(_d: TableData): TableData[0] {
+	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: 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 async function copy_table_data(
 	data: TableData,
-	headers?: HeadersWithIDs
+	headers?: HeadersWithIDs,
+	selected_cells?: CellCoordinate[]
 ): 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");
+	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 all_data = header_row ? `${header_row}\n${table_data}` : table_data;
+	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: string): Promise<void> {
 	try {
 		if ("clipboard" in navigator) {
-			await navigator.clipboard.writeText(all_data);
+			await navigator.clipboard.writeText(csv_data);
 		} else {
 			const textArea = document.createElement("textarea");
-			textArea.value = all_data;
+			textArea.value = csv_data;
 			textArea.style.position = "absolute";
 			textArea.style.left = "-999999px";
 			document.body.prepend(textArea);
@@ -36,3 +105,44 @@ export async function copy_table_data(
 		console.error("Failed to copy table data:", error);
 	}
 }
+
+export function blob_to_string(
+	blob: Blob,
+	col_count: [number, "fixed" | "dynamic"],
+	make_headers: (head: string[]) => HeadersWithIDs,
+	set_values: (values: (string | number)[][]) => void
+): void {
+	const reader = new FileReader();
+
+	function handle_read(e: ProgressEvent<FileReader>): void {
+		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: string,
+	col_count: [number, "fixed" | "dynamic"],
+	make_headers: (head: string[]) => HeadersWithIDs,
+	set_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);
+		make_headers(col_count[1] === "fixed" ? head.slice(0, col_count[0]) : head);
+		set_values(rest);
+	});
+	reader.readAsText(blob);
+}

package/shared/types.ts

@@ -0,0 +1,2 @@
+export type CellCoordinate = [number, number];
+export type EditingState = CellCoordinate | false;