@gradio/dataframe 0.15.0 → 0.16.1

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.15.0",
+  "version": "0.16.1",
   "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/atoms": "^0.13.2",
+    "@gradio/client": "^1.12.0",
     "@gradio/icons": "^0.10.0",
-    "@gradio/markdown-code": "^0.3.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"
+    "@gradio/button": "^0.4.6",
+    "@gradio/markdown-code": "^0.4.0",
+    "@gradio/upload": "^0.15.1",
+    "@gradio/statustracker": "^0.10.3",
+    "@gradio/utils": "^0.10.1"
   },
   "exports": {
     ".": {

package/shared/CellMenu.svelte

@@ -89,7 +89,7 @@
 <style>
 	.cell-menu {
 		position: fixed;
-		z-index: var(--layer-2);
+		z-index: var(--layer-4);
 		background: var(--background-fill-primary);
 		border: 1px solid var(--border-color-primary);
 		border-radius: var(--radius-sm);

package/shared/EditableCell.svelte

@@ -110,7 +110,6 @@
 	class:multiline={header}
 	on:focus|preventDefault
 	style={styling}
-	class="table-cell-text"
 	data-editable={editable}
 	placeholder=" "
 >
@@ -149,7 +148,6 @@
 		position: relative;
 		display: inline-block;
 		outline: none;
-		padding: var(--size-2);
 		-webkit-user-select: text;
 		-moz-user-select: text;
 		-ms-user-select: text;
@@ -159,10 +157,6 @@
 		height: 100%;
 	}
 
-	input:where(:not(.header), [data-editable="true"]) {
-		width: calc(100% - var(--size-10));
-	}
-
 	span.expanded {
 		height: auto;
 		min-height: 100%;
@@ -180,6 +174,7 @@
 		font-weight: var(--weight-bold);
 		white-space: normal;
 		word-break: break-word;
+		margin-left: var(--size-1);
 	}
 
 	.edit {