@gradio/dataframe 0.24.5 → 0.24.7

package/Index.svelte

@@ -124,5 +124,6 @@
 		oninput={handle_input}
 		onselect={handle_select}
 		onedit={handle_edit}
+		onerror={(message) => gradio.dispatch("error", message)}
 	/>
 </Block>

package/dist/Index.svelte

@@ -124,5 +124,6 @@
 		oninput={handle_input}
 		onselect={handle_select}
 		onedit={handle_edit}
+		onerror={(message) => gradio.dispatch("error", message)}
 	/>
 </Block>

package/dist/shared/Table.svelte

@@ -35,7 +35,7 @@
 		is_cell_selected,
 		handle_click_outside as handle_click_outside_util
 	} from "./utils/selection_utils";
-	import { copy_table_data, handle_file_upload } from "./utils/table_utils";
+	import { copy_table_data, parse_table_file } from "./utils/table_utils";
 	import { gradio_filter_fn } from "./utils/filter";
 	import { create_column_measurement } from "./column_measurement.svelte.js";
 
@@ -73,7 +73,8 @@
 		onselect,
 		onedit,
 		onsearch,
-		onfullscreen
+		onfullscreen,
+		onerror
 	}: {
 		datatype: Datatype | Datatype[];
 		label?: string | null;
@@ -109,6 +110,7 @@
 		onedit?: (detail: EditData) => void;
 		onsearch?: (detail: string | null) => void;
 		onfullscreen?: () => void;
+		onerror?: (message: string) => void;
 	} = $props();
 
 	type GradioRow = Record<string, CellValue> & { _index: number };
@@ -277,7 +279,11 @@
 	let copy_flash = $state(false);
 	let is_dragging = $state(false);
 	let show_scroll_button = $state(false);
-	let dragging = $state(false); // file drag
+	let file_dragging = $state(false);
+	let discard_pending_edit = false;
+	// document-unique so several dataframes on a page do not describe each
+	// other's grids
+	const drop_hint_id = $props.id();
 
 	let parent: HTMLDivElement;
 
@@ -603,12 +609,21 @@
 		blur_event: FocusEvent;
 		coords: [number, number];
 	}): void {
+		// an import replaces the table under an open editor, and EditableCell
+		// commits when it leaves edit mode either way. that half-typed value
+		// belongs to the table that just went away
+		if (discard_pending_edit) return;
+
 		const { coords } = detail;
 		const input_el = detail.blur_event.target as HTMLTextAreaElement;
 		if (!input_el || input_el.value === undefined) return;
 
 		const [row, col] = coords;
-		const old_value = values?.[row]?.[col];
+		// and deleting a row leaves the editor's row behind. a column short of
+		// the header is not the same thing: a value can arrive ragged, and the
+		// cell past the end of its own row still renders and still takes an edit
+		if (!values?.[row]) return;
+		const old_value = values[row][col];
 		const new_value = input_el.value;
 
 		if (String(old_value) !== String(new_value)) {
@@ -858,16 +873,22 @@
 		return true;
 	}
 
+	// every one of these holds a row or column index, so they have to go
+	// whenever the table stops being the one they were recorded against
+	function reset_interaction_state(): void {
+		selected_cells = [];
+		selected = false;
+		range_anchor = false;
+		editing = false;
+		header_edit = false;
+		selected_header = false;
+		active_cell_menu = null;
+		active_header_menu = null;
+	}
+
 	function handle_click_outside(event: Event): void {
 		if (handle_click_outside_util(event, parent)) {
-			selected_cells = [];
-			selected = false;
-			range_anchor = false;
-			editing = false;
-			header_edit = false;
-			selected_header = false;
-			active_cell_menu = null;
-			active_header_menu = null;
+			reset_interaction_state();
 		}
 	}
 
@@ -1113,21 +1134,87 @@
 		}
 	}
 
-	function on_file_upload(file_data: any): void {
-		handle_file_upload(
-			typeof file_data === "string" ? file_data : (file_data?.data ?? ""),
-			(head) => {
-				headers = head.map((h: any) => h ?? "");
-				return (headers as string[]).map((h: string, i: number) => ({
-					id: `h_${i}`,
-					value: h
-				}));
-			},
-			(vals) => {
-				values = vals;
-				push_change(vals, headers as string[]);
-			}
+	function interpolate(
+		message: string,
+		values: Record<string, string | number>
+	): string {
+		return message.replace(/\{(\w+)\}/g, (_, key) => String(values[key]));
+	}
+
+	function apply_imported_table(
+		new_headers: (string | null)[],
+		new_values: CellValue[][]
+	): void {
+		if (!new_headers.length) {
+			throw new Error(i18n("dataframe.import_empty_file"));
+		}
+		// a file of separators alone parses into a header of blank names, and
+		// importing it would replace the table with unnamed columns
+		if (new_headers.every((h) => !h?.trim())) {
+			throw new Error(i18n("dataframe.import_no_column_names"));
+		}
+		// a row the header cannot account for would reach the backend as a ragged
+		// value, and the column checks below only see the header
+		const ragged = new_values.findIndex(
+			(row) => row.length !== new_headers.length
 		);
+		if (ragged !== -1) {
+			throw new Error(
+				interpolate(i18n("dataframe.import_ragged_row"), {
+					line: ragged + 2,
+					fields: new_values[ragged].length,
+					columns: new_headers.length
+				})
+			);
+		}
+		// the menu paths already refuse to change a fixed shape or write to a
+		// read-only column, so an import must not be the way around them
+		if (static_columns.length > 0) {
+			throw new Error(i18n("dataframe.import_static_columns"));
+		}
+		if (col_count[1] === "fixed" && new_headers.length !== col_count[0]) {
+			throw new Error(
+				interpolate(i18n("dataframe.import_fixed_columns"), {
+					expected: col_count[0],
+					actual: new_headers.length
+				})
+			);
+		}
+		if (row_count[1] === "fixed" && new_values.length !== row_count[0]) {
+			throw new Error(
+				interpolate(i18n("dataframe.import_fixed_rows"), {
+					expected: row_count[0],
+					actual: new_values.length
+				})
+			);
+		}
+
+		discard_pending_edit = true;
+		headers = new_headers;
+		values = new_values;
+		reset_interaction_state();
+		// tanstack keys these by positional col_N, so they would land on whichever
+		// column now sits at that index. a search is worse than misplaced: it hides
+		// imported rows, and commit_filter then drops the hidden ones from the value
+		sorting = [];
+		column_filters = [];
+		global_filter = "";
+		push_change(new_values, headers as string[]);
+		tick().then(() => (discard_pending_edit = false));
+	}
+
+	// undefined when every dropped file was filtered out by `filetype`
+	function on_file_upload(file: File | undefined): void {
+		if (!editable || !file) return;
+		parse_table_file(file)
+			.then(({ headers: new_headers, values: new_values }) =>
+				apply_imported_table(new_headers, new_values)
+			)
+			.catch((e) => {
+				const message = e instanceof Error ? e.message : String(e);
+				if (onerror) onerror(message);
+				else console.error(message);
+			});
 	}
 
 	onMount(() => {
@@ -1225,6 +1312,7 @@
 		bind:this={parent}
 		class="table-wrap"
 		class:dragging={is_dragging}
+		class:file-dragging={file_dragging && editable}
 		class:menu-open={active_cell_menu || active_header_menu}
 		onkeydown={handle_keydown}
 		role="grid"
@@ -1232,6 +1320,7 @@
 		aria-rowcount={rows.length + 1}
 		aria-colcount={resolved_headers.length + Number(show_row_numbers)}
 		aria-readonly={!editable}
+		aria-describedby={editable ? drop_hint_id : undefined}
 		tabindex={rows.length === 0 ? 0 : -1}
 		style="--df-max-col-width: {viewport_width}px;"
 	>
@@ -1242,10 +1331,12 @@
 			center={false}
 			boundedheight={false}
 			disable_click={true}
+			format="blob"
+			filetype={[".csv", ".tsv"]}
 			{root}
 			onload={on_file_upload}
-			bind:dragging
-			aria_label={i18n("dataframe.drop_to_upload")}
+			onerror={editable ? onerror : undefined}
+			bind:dragging={file_dragging}
 			tab_index={-1}
 			container_element="div"
 		>
@@ -1470,6 +1561,15 @@
 		{/if}
 	</div>
 
+	<!-- outside the grid: #13729 took the label off a span like this one and put it
+	     on the grid as an attribute, and a test pins that there is no sr-only text
+	     inside. a description has no equally well supported attribute form -->
+	{#if editable}
+		<span id={drop_hint_id} class="drop-hint"
+			>{i18n("dataframe.drop_to_upload")}</span
+		>
+	{/if}
+
 	{#if values.length === 0 && editable && row_count[1] === "dynamic"}
 		<EmptyRowButton on_click={() => add_row()} />
 	{/if}
@@ -1585,8 +1685,13 @@
 
 	.table-wrap {
 		position: relative;
-		transition: 150ms;
 		width: 100%;
+		/* the duration used to stand alone, which means every property. that
+		   swept the drag outline in from `currentcolor`, near-white in dark
+		   mode, before it reached the accent. the list is what the fullscreen
+		   rules above actually change */
+		transition-property: flex-grow, flex-shrink, flex-basis, min-height;
+		transition-duration: 150ms;
 	}
 
 	/* Constrain Upload component wrapper */
@@ -1602,6 +1707,27 @@
 		outline: none;
 	}
 
+	/* after :focus-within, which is equally specific and would otherwise
+	   clear the outline whenever a cell is focused. drawn inside the box so
+	   hovering a file over the table shifts nothing */
+	.table-wrap.file-dragging {
+		outline: 2px solid var(--color-accent);
+		outline-offset: -2px;
+		/* matches the .upload-container border the outline covers */
+		border-radius: var(--table-radius);
+	}
+
+	/* an aria-describedby target, so it has to stay in the accessibility tree
+	   rather than be hidden with display: none */
+	.drop-hint {
+		position: absolute;
+		clip-path: inset(50%);
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
 	.table-wrap.dragging {
 		cursor: crosshair !important;
 		user-select: none;

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

@@ -42,6 +42,7 @@ type $$ComponentProps = {
     onedit?: (detail: EditData) => void;
     onsearch?: (detail: string | null) => void;
     onfullscreen?: () => void;
+    onerror?: (message: string) => void;
 };
 declare const Table: import("svelte").Component<$$ComponentProps, {}, "headers" | "values" | "value_is_output">;
 type Table = ReturnType<typeof Table>;

package/dist/shared/types.d.ts

@@ -1,10 +1,6 @@
 export type CellCoordinate = [number, number];
 export type EditingState = CellCoordinate | false;
 export type Headers = (string | null)[];
-export interface HeadersWithIDs {
-    id: string;
-    value: string;
-}
 export type CellValue = string | number | boolean;
 export interface TableCell {
     id: string;

package/dist/shared/types.js

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

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

@@ -1,7 +1,8 @@
-import type { CellValue, Headers, HeadersWithIDs, TableData } from "../types";
+import type { CellValue, Headers, TableData } from "../types";
 export declare function make_cell_id(row: number, col: number): string;
 export declare function make_header_id(col: number): string;
 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: CellValue[][]) => void): void;
+export declare function parse_table_file(file: File): Promise<{
+    headers: Headers;
+    values: CellValue[][];
+}>;

package/dist/shared/utils/table_utils.js

@@ -36,41 +36,43 @@ export async function copy_table_data(data, selected_cells) {
         throw new Error("Failed to copy to clipboard: " + err.message);
     }
 }
-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 async function parse_table_file(file) {
+    const text = await file.text();
+    if (!text.trim())
+        return { headers: [], values: [] };
+    // the drop zone only accepts .csv and .tsv, so the extension goes first and
+    // wins any tie, but a mislabeled file is still read by its content: a
+    // separator only takes the file if it splits every line the same way, which
+    // is what tells a real separator from one that sits in a header name. the
+    // split is d3's rather than a raw count, so a separator inside a quoted
+    // field does not throw the detection off.
+    const by_extension = file.name.toLowerCase().endsWith(".tsv") ? "\t" : ",";
+    const candidates = by_extension === "\t" ? ["\t", ","] : [",", "\t"];
+    let consistent;
+    let ragged;
+    let unsplit;
+    for (const delimiter of candidates) {
+        // a blank line parses to a single empty field, which both the width
+        // checks below and the caller's ragged check would read as a short row
+        const parsed = dsvFormat(delimiter)
+            .parseRows(text)
+            .filter((row) => row.length > 1 || row[0] !== "");
+        const width = parsed[0]?.length ?? 0;
+        // the extension is first in `candidates`, so this keeps its parse for the
+        // single-column case rather than running it again at the end
+        unsplit ??= parsed;
+        if (width < 2)
+            continue;
+        if (parsed.every((row) => row.length === width)) {
+            consistent = parsed;
+            break;
         }
+        // a separator that splits the header but leaves the rows uneven is
+        // usually the one that just happens to appear in a header name. keep it
+        // only in case the other does not split at all, where a ragged table is
+        // still better to report on than an unsplit one
+        ragged ??= parsed;
     }
-}
-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);
+    const [head = [], ...rest] = consistent ?? ragged ?? unsplit ?? [];
+    return { headers: head.map((h) => h ?? ""), values: rest };
 }

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

@@ -5,10 +5,6 @@ export type Datatype = "str" | "number" | "bool" | "date" | "markdown" | "html"
 export type Metadata = {
     [key: string]: string[][] | null;
 } | null;
-export type HeadersWithIDs = {
-    value: string;
-    id: string;
-}[];
 export type DataframeValue = {
     data: Data;
     headers: Headers;

package/dist/standalone/default_i18n.js

@@ -5,6 +5,13 @@ export const default_i18n = {
     "dataframe.add_column_left": "Add column left",
     "dataframe.add_column_right": "Add column right",
     "dataframe.delete_column": "Delete column",
+    "dataframe.drop_to_upload": "Drop CSV or TSV files here to import data into dataframe",
+    "dataframe.import_empty_file": "The dropped file is empty.",
+    "dataframe.import_no_column_names": "The dropped file has no column names.",
+    "dataframe.import_ragged_row": "Line {line} of the file has {fields} fields, the header has {columns}.",
+    "dataframe.import_static_columns": "Cannot import into a table with read-only columns.",
+    "dataframe.import_fixed_columns": "This table takes exactly {expected} columns, the file has {actual}.",
+    "dataframe.import_fixed_rows": "This table takes exactly {expected} rows, the file has {actual}.",
     "dataframe.sort_asc": "Sort ascending",
     "dataframe.sort_desc": "Sort descending",
     "dataframe.sort_ascending": "Sort ascending",

package/dist/types.d.ts

@@ -6,6 +6,7 @@ export interface DataframeEvents {
     input: never;
     select: SelectData;
     edit: EditData;
+    error: string;
     clear_status: LoadingStatus;
 }
 export interface DataframeProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.24.5",
+  "version": "0.24.7",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -15,15 +15,15 @@
     "dequal": "^2.0.3",
     "@tanstack/table-core": "^8.21.3",
     "@tanstack/virtual-core": "^3.13.6",
-    "@gradio/atoms": "^0.26.2",
-    "@gradio/checkbox": "^0.8.3",
-    "@gradio/button": "^0.8.2",
-    "@gradio/client": "^2.7.0",
-    "@gradio/markdown-code": "^0.10.1",
+    "@gradio/atoms": "^0.26.3",
+    "@gradio/checkbox": "^0.8.4",
+    "@gradio/client": "^2.7.2",
+    "@gradio/markdown-code": "^0.10.3",
+    "@gradio/button": "^0.8.4",
+    "@gradio/statustracker": "^0.16.0",
+    "@gradio/utils": "^0.15.0",
     "@gradio/icons": "^0.16.0",
-    "@gradio/upload": "^0.18.3",
-    "@gradio/statustracker": "^0.15.3",
-    "@gradio/utils": "^0.14.2"
+    "@gradio/upload": "^0.19.1"
   },
   "exports": {
     ".": {