@gradio/dataframe 0.13.1 → 0.15.0

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

@@ -28,7 +28,9 @@ declare const __propDef: {
         upload: Client["upload"];
         stream_handler: Client["stream"];
         show_fullscreen_button?: boolean | undefined;
+        show_copy_button?: boolean | undefined;
         value_is_output?: boolean | undefined;
+        max_chars?: number | undefined;
         display_value?: (string[][] | null) | undefined;
         styling?: (string[][] | null) | undefined;
     };

package/dist/shared/Toolbar.svelte

@@ -1,19 +1,59 @@
-<script>import { Maximize, Minimize } from "@gradio/icons";
+<script>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;
+let copied = false;
+let timer;
+function copy_feedback() {
+  copied = true;
+  if (timer)
+    clearTimeout(timer);
+  timer = setTimeout(() => {
+    copied = false;
+  }, 2e3);
+}
+async function handle_copy() {
+  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/dist/shared/Toolbar.svelte.d.ts

@@ -2,7 +2,9 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         show_fullscreen_button?: boolean | undefined;
+        show_copy_button?: boolean | undefined;
         is_fullscreen?: boolean | undefined;
+        on_copy: () => Promise<void>;
     };
     events: {
         click: MouseEvent;

package/dist/shared/selection_utils.d.ts

@@ -0,0 +1,20 @@
+export type CellCoordinate = [number, number];
+export type CellData = {
+    id: string;
+    value: string | number;
+};
+export type EditingState = false | CellCoordinate;
+export declare function is_cell_selected(cell: CellCoordinate, selected_cells: CellCoordinate[]): string;
+export declare function get_range_selection(start: CellCoordinate, end: CellCoordinate): CellCoordinate[];
+export declare function handle_selection(current: CellCoordinate, selected_cells: CellCoordinate[], event: {
+    shiftKey: boolean;
+    metaKey: boolean;
+    ctrlKey: boolean;
+}): CellCoordinate[];
+export declare function handle_delete_key(data: CellData[][], selected_cells: CellCoordinate[]): CellData[][];
+export declare function handle_editing_state(current: CellCoordinate, editing: EditingState, selected_cells: CellCoordinate[], editable: boolean): EditingState;
+export declare function should_show_cell_menu(cell: CellCoordinate, selected_cells: CellCoordinate[], editable: boolean): boolean;
+export declare function get_next_cell_coordinates(current: CellCoordinate, data: CellData[][], shift_key: boolean): CellCoordinate | false;
+export declare function move_cursor(key: "ArrowRight" | "ArrowLeft" | "ArrowDown" | "ArrowUp", current_coords: CellCoordinate, data: CellData[][]): CellCoordinate | false;
+export declare function get_current_indices(id: string, data: CellData[][]): [number, number];
+export declare function handle_click_outside(event: Event, parent: HTMLElement): boolean;

package/dist/shared/selection_utils.js

@@ -0,0 +1,111 @@
+export function is_cell_selected(cell, selected_cells) {
+    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, end) {
+    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 = [];
+    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, selected_cells, event) {
+    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, selected_cells) {
+    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, editing, selected_cells, editable) {
+    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, selected_cells, editable) {
+    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, data, shift_key) {
+    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, current_coords, data) {
+    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, data) {
+    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, parent) {
+    const [trigger] = event.composedPath();
+    return !parent.contains(trigger);
+}

package/dist/shared/table_utils.d.ts

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,113 @@
+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);
+}

package/dist/shared/types.d.ts

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

package/dist/shared/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -17,14 +17,14 @@
     "dompurify": "^3.0.3",
     "katex": "^0.16.7",
     "marked": "^12.0.0",
-    "@gradio/button": "^0.4.3",
-    "@gradio/client": "^1.10.0",
     "@gradio/atoms": "^0.13.1",
     "@gradio/icons": "^0.10.0",
-    "@gradio/statustracker": "^0.10.2",
-    "@gradio/upload": "^0.14.7",
     "@gradio/markdown-code": "^0.3.0",
-    "@gradio/utils": "^0.10.0"
+    "@gradio/statustracker": "^0.10.2",
+    "@gradio/button": "^0.4.5",
+    "@gradio/upload": "^0.15.0",
+    "@gradio/utils": "^0.10.0",
+    "@gradio/client": "^1.11.0"
   },
   "exports": {
     ".": {

package/shared/CellMenu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import Arrow from "./Arrow.svelte";
+	import CellMenuIcons from "./CellMenuIcons.svelte";
 	import type { I18nFormatter } from "js/utils/src";
 
 	export let x: number;
@@ -12,6 +12,10 @@
 	export let row: number;
 	export let col_count: [number, "fixed" | "dynamic"];
 	export let row_count: [number, "fixed" | "dynamic"];
+	export let on_delete_row: () => void;
+	export let on_delete_col: () => void;
+	export let can_delete_rows: boolean;
+	export let can_delete_cols: boolean;
 
 	export let i18n: I18nFormatter;
 	let menu_element: HTMLDivElement;
@@ -50,23 +54,35 @@
 <div bind:this={menu_element} class="cell-menu">
 	{#if !is_header && can_add_rows}
 		<button on:click={() => on_add_row_above()}>
-			<Arrow transform="rotate(-90 12 12)" />
+			<CellMenuIcons icon="add-row-above" />
 			{i18n("dataframe.add_row_above")}
 		</button>
 		<button on:click={() => on_add_row_below()}>
-			<Arrow transform="rotate(90 12 12)" />
+			<CellMenuIcons icon="add-row-below" />
 			{i18n("dataframe.add_row_below")}
 		</button>
+		{#if can_delete_rows}
+			<button on:click={on_delete_row} class="delete">
+				<CellMenuIcons icon="delete-row" />
+				{i18n("dataframe.delete_row")}
+			</button>
+		{/if}
 	{/if}
 	{#if can_add_columns}
 		<button on:click={() => on_add_column_left()}>
-			<Arrow transform="rotate(180 12 12)" />
+			<CellMenuIcons icon="add-column-left" />
 			{i18n("dataframe.add_column_left")}
 		</button>
 		<button on:click={() => on_add_column_right()}>
-			<Arrow transform="rotate(0 12 12)" />
+			<CellMenuIcons icon="add-column-right" />
 			{i18n("dataframe.add_column_right")}
 		</button>
+		{#if can_delete_cols}
+			<button on:click={on_delete_col} class="delete">
+				<CellMenuIcons icon="delete-column" />
+				{i18n("dataframe.delete_column")}
+			</button>
+		{/if}
 	{/if}
 </div>
 
@@ -110,8 +126,4 @@
 		fill: currentColor;
 		transition: fill 0.2s;
 	}
-
-	.cell-menu button:hover :global(svg) {
-		fill: var(--color-accent);
-	}
 </style>

package/shared/CellMenuIcons.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	export let icon: string;
+</script>
+
+{#if icon == "add-column-right"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="4"
+			y="6"
+			width="4"
+			height="12"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+		/>
+		<path
+			d="M12 12H19M16 8L19 12L16 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "add-column-left"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="16"
+			y="6"
+			width="4"
+			height="12"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+		/>
+		<path
+			d="M12 12H5M8 8L5 12L8 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "add-row-above"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="6"
+			y="16"
+			width="12"
+			height="4"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M12 12V5M8 8L12 5L16 8"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "add-row-below"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="6"
+			y="4"
+			width="12"
+			height="4"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M12 12V19M8 16L12 19L16 16"
+			stroke="currentColor"
+			stroke-width="2"
+			fill="none"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "delete-row"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="5"
+			y="10"
+			width="14"
+			height="4"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M8 7L16 17M16 7L8 17"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{:else if icon == "delete-column"}
+	<svg viewBox="0 0 24 24" width="16" height="16">
+		<rect
+			x="10"
+			y="5"
+			width="4"
+			height="14"
+			stroke="currentColor"
+			stroke-width="2"
+		/>
+		<path
+			d="M7 8L17 16M17 8L7 16"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+		/>
+	</svg>
+{/if}

package/shared/EditableCell.svelte

@@ -23,12 +23,27 @@
 	export let line_breaks = true;
 	export let editable = true;
 	export let root: string;
+	export let max_chars: number | null = null;
 
 	const dispatch = createEventDispatcher();
+	let is_expanded = false;
 
 	export let el: HTMLInputElement | null;
 	$: _value = value;
 
+	function truncate_text(
+		text: string | number,
+		max_length: number | null = null
+	): string {
+		const str = String(text);
+		if (!max_length || str.length <= max_length) return str;
+		return str.slice(0, max_length) + "...";
+	}
+
+	$: display_text = is_expanded
+		? value
+		: truncate_text(display_value || value, max_chars);
+
 	function use_focus(node: HTMLInputElement): any {
 		if (clear_on_focus) {
 			_value = "";
@@ -52,11 +67,21 @@
 
 	function handle_keydown(event: KeyboardEvent): void {
 		if (event.key === "Enter") {
-			value = _value;
-			dispatch("blur");
+			if (edit) {
+				value = _value;
+				dispatch("blur");
+			} else if (!header) {
+				is_expanded = !is_expanded;
+			}
 		}
 		dispatch("keydown", event);
 	}
+
+	function handle_click(): void {
+		if (!edit && !header) {
+			is_expanded = !is_expanded;
+		}
+	}
 </script>
 
 {#if edit}
@@ -76,27 +101,31 @@
 {/if}
 
 <span
-	on:dblclick
-	tabindex="-1"
+	on:click={handle_click}
+	on:keydown={handle_keydown}
+	tabindex="0"
 	role="button"
 	class:edit
+	class:expanded={is_expanded}
+	class:multiline={header}
 	on:focus|preventDefault
 	style={styling}
 	class="table-cell-text"
+	data-editable={editable}
 	placeholder=" "
 >
 	{#if datatype === "html"}
-		{@html value}
+		{@html display_text}
 	{:else if datatype === "markdown"}
 		<MarkdownCode
-			message={value.toLocaleString()}
+			message={display_text.toLocaleString()}
 			{latex_delimiters}
 			{line_breaks}
 			chatbot={false}
 			{root}
 		/>
 	{:else}
-		{editable ? value : display_value || value}
+		{editable ? display_text : display_value || display_text}
 	{/if}
 </span>
 
@@ -117,6 +146,8 @@
 
 	span {
 		flex: 1 1 0%;
+		position: relative;
+		display: inline-block;
 		outline: none;
 		padding: var(--size-2);
 		-webkit-user-select: text;
@@ -124,11 +155,31 @@
 		-ms-user-select: text;
 		user-select: text;
 		cursor: text;
+		width: 100%;
+		height: 100%;
+	}
+
+	input:where(:not(.header), [data-editable="true"]) {
+		width: calc(100% - var(--size-10));
+	}
+
+	span.expanded {
+		height: auto;
+		min-height: 100%;
+		white-space: pre-wrap;
+		word-break: break-word;
+		white-space: normal;
+	}
+
+	.multiline {
+		white-space: pre-line;
 	}
 
 	.header {
 		transform: translateX(0);
 		font-weight: var(--weight-bold);
+		white-space: normal;
+		word-break: break-word;
 	}
 
 	.edit {