@gradio/dataframe 0.14.0 → 0.16.0

package/dist/shared/types.js

@@ -0,0 +1,2 @@
+[];
+export {};

package/dist/shared/utils/menu_utils.d.ts

@@ -0,0 +1,42 @@
+export declare 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;
+export declare 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;
+export declare function add_row_at(index: number, position: "above" | "below", add_row: (index?: number) => void, clear_menus: () => void): void;
+export declare function add_col_at(index: number, position: "left" | "right", add_col: (index?: number) => void, clear_menus: () => void): void;
+export declare function delete_row_at(index: number, delete_row: (index: number) => void, clear_menus: () => void): void;
+export declare function delete_col_at(index: number, delete_col: (index: number) => void, clear_menus: () => void): void;
+export declare 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;
+export declare 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;

package/dist/shared/utils/menu_utils.js

@@ -0,0 +1,58 @@
+export function toggle_header_menu(event, col, active_header_menu, set_active_header_menu) {
+    event.stopPropagation();
+    if (active_header_menu && active_header_menu.col === col) {
+        set_active_header_menu(null);
+    }
+    else {
+        const header = event.target.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, row, col, active_cell_menu, set_active_cell_menu) {
+    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.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, position, add_row, clear_menus) {
+    const row_index = position === "above" ? index : index + 1;
+    add_row(row_index);
+    clear_menus();
+}
+export function add_col_at(index, position, add_col, clear_menus) {
+    const col_index = position === "left" ? index : index + 1;
+    add_col(col_index);
+    clear_menus();
+}
+export function delete_row_at(index, delete_row, clear_menus) {
+    delete_row(index);
+    clear_menus();
+}
+export function delete_col_at(index, delete_col, clear_menus) {
+    delete_col(index);
+    clear_menus();
+}
+export function toggle_header_button(col, active_button, set_active_button) {
+    set_active_button(active_button?.type === "header" && active_button.col === col
+        ? null
+        : { type: "header", col });
+}
+export function toggle_cell_button(row, col, active_button, set_active_button) {
+    set_active_button(active_button?.type === "cell" &&
+        active_button.row === row &&
+        active_button.col === col
+        ? null
+        : { type: "cell", row, col });
+}

package/dist/shared/utils/sort_utils.d.ts

@@ -0,0 +1,7 @@
+import type { Headers } from "../types";
+export type SortDirection = "asc" | "des";
+export declare function get_sort_status(name: string, sort_by: number | undefined, direction: SortDirection | undefined, headers: Headers): "none" | "ascending" | "descending";
+export declare function sort_data(data: {
+    id: string;
+    value: string | number;
+}[][], sort_by: number | undefined, sort_direction: SortDirection | undefined): number[];

package/dist/shared/utils/sort_utils.js

@@ -0,0 +1,39 @@
+export function get_sort_status(name, sort_by, direction, headers) {
+    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, sort_by, sort_direction) {
+    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/dist/shared/utils/table_utils.d.ts

@@ -0,0 +1,12 @@
+import type { Headers, HeadersWithIDs, TableCell, TableData, CountConfig, ElementRefs, DataBinding } from "../types";
+import type { SortDirection } from "./sort_utils";
+export declare function make_cell_id(row: number, col: number): string;
+export declare function make_header_id(col: number): string;
+export declare 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;
+export declare function make_headers(input_headers: Headers, show_row_numbers: boolean, col_count: CountConfig, element_refs: ElementRefs): HeadersWithIDs[];
+export declare function get_max(data: TableData): TableCell[];
+export declare function sort_table_data(data: TableData, display_value: string[][] | null, styling: string[][] | null, col: number, dir: SortDirection): void;
+export declare function copy_table_data(data: TableData, selected_cells: [number, number][]): Promise<void>;
+export declare function guess_delimiter(text: string, possibleDelimiters: string[]): string[];
+export declare function data_uri_to_blob(data_uri: string): Blob;
+export declare function handle_file_upload(data_uri: string, update_headers: (headers: Headers) => HeadersWithIDs[], update_values: (values: (string | number)[][]) => void): void;

package/dist/shared/utils/table_utils.js

@@ -0,0 +1,148 @@
+import { sort_data } from "./sort_utils";
+import { dsvFormat } from "d3-dsv";
+export function make_cell_id(row, col) {
+    return `cell-${row}-${col}`;
+}
+export function make_header_id(col) {
+    return `header-${col}`;
+}
+export function process_data(input_values, row_count, col_count, headers, show_row_numbers, element_refs, data_binding) {
+    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 = {
+                value: input_values?.[row]?.[col] ?? "",
+                id: cell_id
+            };
+            data_binding[cell_id] = cell_obj;
+            return cell_obj;
+        });
+    });
+}
+export function make_headers(input_headers, show_row_numbers, col_count, element_refs) {
+    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, col) => {
+        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) {
+    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, display_value, styling, col, dir) {
+    const indices = sort_data(data, col, dir);
+    const new_data = indices.map((i) => data[i]);
+    data.splice(0, data.length, ...new_data);
+    if (display_value) {
+        const new_display = indices.map((i) => display_value[i]);
+        display_value.splice(0, display_value.length, ...new_display);
+    }
+    if (styling) {
+        const new_styling = indices.map((i) => styling[i]);
+        styling.splice(0, styling.length, ...new_styling);
+    }
+}
+export async function copy_table_data(data, selected_cells) {
+    const csv = selected_cells.reduce((acc, [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.message);
+    }
+}
+// File Import/Export
+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 function handle_file_upload(data_uri, update_headers, update_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);
+        update_headers(head);
+        update_values(rest);
+    });
+    reader.readAsText(blob);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.14.0",
+  "version": "0.16.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/atoms": "^0.13.1",
-    "@gradio/button": "^0.4.4",
-    "@gradio/client": "^1.10.0",
+    "@gradio/atoms": "^0.13.2",
+    "@gradio/button": "^0.4.6",
+    "@gradio/markdown-code": "^0.4.0",
+    "@gradio/client": "^1.12.0",
+    "@gradio/statustracker": "^0.10.3",
     "@gradio/icons": "^0.10.0",
-    "@gradio/statustracker": "^0.10.2",
-    "@gradio/markdown-code": "^0.3.0",
-    "@gradio/utils": "^0.10.0",
-    "@gradio/upload": "^0.14.8"
+    "@gradio/upload": "^0.15.1",
+    "@gradio/utils": "^0.10.1"
   },
   "exports": {
     ".": {

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,18 +146,37 @@
 
 	span {
 		flex: 1 1 0%;
+		position: relative;
+		display: inline-block;
 		outline: none;
 		padding: var(--size-2);
+		padding-right: 0;
 		-webkit-user-select: text;
 		-moz-user-select: text;
 		-ms-user-select: text;
 		user-select: text;
 		cursor: text;
+		width: 100%;
+		height: 100%;
+	}
+
+	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 {