@gradio/dataframe 0.13.1 → 0.15.0

package/shared/Toolbar.svelte

@@ -1,21 +1,63 @@
 <script lang="ts">
-	import { Maximize, Minimize } from "@gradio/icons";
+	import { Maximize, Minimize, Copy, Check } from "@gradio/icons";
+	import { onDestroy } from "svelte";
 
 	export let show_fullscreen_button = false;
+	export let show_copy_button = false;
 	export let is_fullscreen = false;
+	export let on_copy: () => Promise<void>;
+
+	let copied = false;
+	let timer: ReturnType<typeof setTimeout>;
+
+	function copy_feedback(): void {
+		copied = true;
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => {
+			copied = false;
+		}, 2000);
+	}
+
+	async function handle_copy(): Promise<void> {
+		await on_copy();
+		copy_feedback();
+	}
+
+	onDestroy(() => {
+		if (timer) clearTimeout(timer);
+	});
 </script>
 
-{#if show_fullscreen_button}
-	<div class="toolbar">
-		<button class="toolbar-button" on:click>
+<div class="toolbar" role="toolbar" aria-label="Table actions">
+	{#if show_copy_button}
+		<button
+			class="toolbar-button"
+			on:click={handle_copy}
+			aria-label={copied ? "Copied to clipboard" : "Copy table data"}
+			title={copied ? "Copied to clipboard" : "Copy table data"}
+		>
+			{#if copied}
+				<Check />
+			{:else}
+				<Copy />
+			{/if}
+		</button>
+	{/if}
+	{#if show_fullscreen_button}
+		<button
+			class="toolbar-button"
+			on:click
+			aria-label={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+			title={is_fullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+		>
 			{#if is_fullscreen}
 				<Minimize />
 			{:else}
 				<Maximize />
 			{/if}
 		</button>
-	</div>
-{/if}
+	{/if}
+</div>
 
 <style>
 	.toolbar {

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

@@ -0,0 +1,148 @@
+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,
+	selected_cells?: CellCoordinate[]
+): Promise<void> {
+	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: string): Promise<void> {
+	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: 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;

package/dist/shared/Arrow.svelte

@@ -1,9 +0,0 @@
-<script>export let transform;
-</script>
-
-<svg viewBox="0 0 24 24" width="16" height="16">
-	<path
-		d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
-		{transform}
-	/>
-</svg>

package/dist/shared/Arrow.svelte.d.ts

@@ -1,16 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        transform: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ArrowProps = typeof __propDef.props;
-export type ArrowEvents = typeof __propDef.events;
-export type ArrowSlots = typeof __propDef.slots;
-export default class Arrow extends SvelteComponent<ArrowProps, ArrowEvents, ArrowSlots> {
-}
-export {};

package/shared/Arrow.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-	export let transform: string;
-</script>
-
-<svg viewBox="0 0 24 24" width="16" height="16">
-	<path
-		d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
-		{transform}
-	/>
-</svg>