@gradio/dataframe 0.19.2 → 0.19.4

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

@@ -1,4 +1,4 @@
-import type { Headers, HeadersWithIDs, TableCell, TableData } from "../types";
+import type { CellValue, Headers, HeadersWithIDs, TableCell, TableData } from "../types";
 import type { SortDirection } from "./sort_utils";
 import type { FilterDatatype } from "./filter_utils";
 export declare function make_cell_id(row: number, col: number): string;
@@ -17,4 +17,4 @@ export declare function filter_table_data(data: TableData, display_value: string
 export declare function copy_table_data(data: TableData, selected_cells: [number, number][] | null): 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;
+export declare function handle_file_upload(data_uri: string, update_headers: (headers: Headers) => HeadersWithIDs[], update_values: (values: CellValue[][]) => void): void;

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

@@ -1,5 +1,6 @@
+import type { CellValue } from "../types";
 export type Headers = string[];
-export type Data = (string | number)[][];
+export type Data = CellValue[][];
 export type Datatype = "str" | "number" | "bool" | "date" | "markdown" | "html" | "image";
 export type Metadata = {
     [key: string]: string[][] | null;
@@ -19,4 +20,9 @@ export type DataframeValue = {
  * @param t - The type to coerce to.
  * @returns The coerced value.
  */
-export declare function cast_value_to_type(v: any, t: Datatype): string | number | boolean;
+export declare function cast_value_to_type(v: any, t: Datatype): CellValue;
+export interface EditData {
+    index: number | [number, number];
+    value: string;
+    previous_value: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.19.2",
+  "version": "0.19.4",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -13,14 +13,14 @@
     "@types/katex": "^0.16.0",
     "d3-dsv": "^3.0.1",
     "dequal": "^2.0.2",
-    "@gradio/button": "^0.5.12",
-    "@gradio/checkbox": "^0.4.29",
-    "@gradio/atoms": "^0.17.0",
+    "@gradio/atoms": "^0.18.0",
+    "@gradio/checkbox": "^0.4.30",
+    "@gradio/button": "^0.5.13",
     "@gradio/icons": "^0.14.0",
-    "@gradio/markdown-code": "^0.5.1",
-    "@gradio/statustracker": "^0.11.0",
-    "@gradio/upload": "^0.16.17",
-    "@gradio/client": "^1.18.0",
+    "@gradio/statustracker": "^0.11.1",
+    "@gradio/markdown-code": "^0.5.2",
+    "@gradio/client": "^1.19.0",
+    "@gradio/upload": "^0.17.0",
     "@gradio/utils": "^0.10.2"
   },
   "exports": {

package/shared/BooleanCell.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
 	import { BaseCheckbox } from "@gradio/checkbox";
 
-	export let value: boolean | string = false;
+	export let value = false;
 	export let editable = true;
 	export let on_change: (value: boolean) => void;
 
-	$: bool_value =
-		typeof value === "string" ? value.toLowerCase() === "true" : !!value;
-
 	function handle_change(event: CustomEvent<boolean>): void {
 		if (editable) {
 			on_change(event.detail);
@@ -17,7 +14,7 @@
 
 <div class="bool-cell" role="button" tabindex="-1">
 	<BaseCheckbox
-		bind:value={bool_value}
+		bind:value
 		label=""
 		interactive={editable}
 		on:change={handle_change}

package/shared/EditableCell.svelte

@@ -2,11 +2,12 @@
 	import { createEventDispatcher } from "svelte";
 	import { MarkdownCode } from "@gradio/markdown-code";
 	import type { I18nFormatter } from "@gradio/utils";
+	import type { CellValue } from "./types";
 	import SelectionButtons from "./icons/SelectionButtons.svelte";
 	import BooleanCell from "./BooleanCell.svelte";
 
 	export let edit: boolean;
-	export let value: string | number = "";
+	export let value: CellValue = "";
 	export let display_value: string | null = null;
 	export let styling = "";
 	export let header = false;
@@ -44,7 +45,7 @@
 	}>();
 
 	function truncate_text(
-		text: string | number,
+		text: CellValue,
 		max_length: number | null = null,
 		is_image = false
 	): string {
@@ -86,18 +87,13 @@
 		dispatch("keydown", event);
 	}
 
-	function handle_bool_change(new_value: boolean): void {
-		value = new_value.toString();
-		dispatch("blur", {
-			blur_event: {
-				target: {
-					type: "checkbox",
-					checked: new_value,
-					value: new_value.toString()
-				}
-			} as unknown as FocusEvent,
-			coords: coords
-		});
+	function commit_change(checked: boolean): void {
+		handle_blur({ target: { value } } as unknown as FocusEvent);
+	}
+
+	$: if (!edit) {
+		// Shim blur on removal for Safari and Firefox
+		handle_blur({ target: { value } } as unknown as FocusEvent);
 	}
 </script>
 
@@ -118,12 +114,8 @@
 	/>
 {/if}
 
-{#if datatype === "bool"}
-	<BooleanCell
-		value={String(display_content)}
-		{editable}
-		on_change={handle_bool_change}
-	/>
+{#if datatype === "bool" && typeof value === "boolean"}
+	<BooleanCell bind:value {editable} on_change={commit_change} />
 {:else}
 	<span
 		class:dragging={is_dragging}

package/shared/Table.svelte

@@ -20,10 +20,15 @@
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import { type Client } from "@gradio/client";
 	import VirtualTable from "./VirtualTable.svelte";
-	import type { Headers, DataframeValue, Datatype } from "./utils/utils";
+	import type {
+		Headers,
+		DataframeValue,
+		Datatype,
+		EditData
+	} from "./utils/utils";
 	import CellMenu from "./CellMenu.svelte";
 	import Toolbar from "./Toolbar.svelte";
-	import type { CellCoordinate } from "./types";
+	import type { CellCoordinate, CellValue } from "./types";
 	import {
 		is_cell_selected,
 		should_show_cell_menu,
@@ -37,7 +42,6 @@
 		handle_file_upload
 	} from "./utils/table_utils";
 	import { make_headers, process_data } from "./utils/data_processing";
-	import { cast_value_to_type } from "./utils/utils";
 	import { handle_keydown, handle_cell_blur } from "./utils/keyboard_utils";
 	import {
 		create_drag_handlers,
@@ -51,7 +55,7 @@
 	export let label: string | null = null;
 	export let show_label = true;
 	export let headers: Headers = [];
-	export let values: (string | number)[][] = [];
+	export let values: CellValue[][] = [];
 	export let col_count: [number, "fixed" | "dynamic"];
 	export let row_count: [number, "fixed" | "dynamic"];
 	export let latex_delimiters: {
@@ -163,6 +167,7 @@
 		input: undefined;
 		select: SelectData;
 		search: string | null;
+		edit: EditData;
 	}>();
 
 	let els: Record<
@@ -172,12 +177,11 @@
 	let data_binding: Record<string, (typeof data)[0][0]> = {};
 	let _headers = make_headers(headers, col_count, els, make_id);
 	let old_headers: string[] = headers;
-	let data: { id: string; value: string | number; display_value?: string }[][] =
-		[[]];
-	let old_val: undefined | (string | number)[][] = undefined;
+	let data: { id: string; value: CellValue; display_value?: string }[][] = [[]];
+	let old_val: undefined | CellValue[][] = undefined;
 	let search_results: {
 		id: string;
-		value: string | number;
+		value: CellValue;
 		display_value?: string;
 		styling?: string;
 	}[][] = [[]];
@@ -196,13 +200,13 @@
 		);
 	});
 
-	const get_data_at = (row: number, col: number): string | number =>
+	const get_data_at = (row: number, col: number): CellValue =>
 		data?.[row]?.[col]?.value;
 
-	const get_column = (col: number): (string | number)[] =>
+	const get_column = (col: number): CellValue[] =>
 		data?.map((row) => row[col]?.value) ?? [];
 
-	const get_row = (row: number): (string | number)[] =>
+	const get_row = (row: number): CellValue[] =>
 		data?.[row]?.map((cell) => cell.value) ?? [];
 
 	$: {
@@ -248,13 +252,14 @@
 				(values[0] && old_val[0] && values[0].length !== old_val[0].length));
 
 		data = process_data(
-			values as (string | number)[][],
+			values as CellValue[][],
 			els,
 			data_binding,
 			make_id,
-			display_value
+			display_value,
+			datatype
 		);
-		old_val = JSON.parse(JSON.stringify(values)) as (string | number)[][];
+		old_val = JSON.parse(JSON.stringify(values)) as CellValue[][];
 
 		if (is_reset || is_different_structure) {
 			df_actions.reset_sort_state();
@@ -326,27 +331,19 @@
 	}
 
 	let previous_headers = _headers.map((h) => h.value);
-	let previous_data = data.map((row) => row.map((cell) => String(cell.value)));
+	let previous_data = data.map((row) => row.map((cell) => cell.value));
 
 	$: {
 		if (data || _headers) {
 			df_actions.trigger_change(
-				data.map((row, rowIdx) =>
-					row.map((cell, colIdx) => {
-						const dtype = Array.isArray(datatype) ? datatype[colIdx] : datatype;
-						return {
-							...cell,
-							value: cast_value_to_type(cell.value, dtype)
-						};
-					})
-				),
+				data,
 				_headers,
 				previous_data,
 				previous_headers,
 				value_is_output,
 				dispatch
 			);
-			previous_data = data.map((row) => row.map((cell) => String(cell.value)));
+			previous_data = data.map((row) => row.map((cell) => cell.value));
 			previous_headers = _headers.map((h) => h.value);
 		}
 	}
@@ -675,12 +672,12 @@
 
 	function commit_filter(): void {
 		if ($df_state.current_search_query && show_search === "filter") {
-			const filtered_data: (string | number)[][] = [];
+			const filtered_data: CellValue[][] = [];
 			const filtered_display_values: string[][] = [];
 			const filtered_styling: string[][] = [];
 
 			search_results.forEach((row) => {
-				const data_row: (string | number)[] = [];
+				const data_row: CellValue[] = [];
 				const display_row: string[] = [];
 				const styling_row: string[] = [];
 
@@ -755,6 +752,19 @@
 		df_actions.reset_sort_state();
 	}
 
+	function handle_select_all(col: number, checked: boolean): void {
+		data = data.map((row) => {
+			const new_row = [...row];
+			if (new_row[col]) {
+				new_row[col] = {
+					...new_row[col],
+					value: checked.toString()
+				};
+			}
+			return new_row;
+		});
+	}
+
 	let is_dragging = false;
 	let drag_start: [number, number] | null = null;
 	let mouse_down_pos: { x: number; y: number } | null = null;
@@ -877,6 +887,9 @@
 							{i18n}
 							bind:el={els[id].input}
 							{col_count}
+							datatype={Array.isArray(datatype) ? datatype[i] : datatype}
+							{data}
+							on_select_all={handle_select_all}
 						/>
 					{/each}
 				</tr>
@@ -980,6 +993,9 @@
 								{i18n}
 								bind:el={els[id].input}
 								{col_count}
+								datatype={Array.isArray(datatype) ? datatype[i] : datatype}
+								{data}
+								on_select_all={handle_select_all}
 							/>
 						{/each}
 					</tr>

package/shared/TableCell.svelte

@@ -3,9 +3,10 @@
 	import CellMenuButton from "./CellMenuButton.svelte";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import type { Datatype } from "./utils/utils";
+	import type { CellValue } from "./types";
 	import { is_cell_in_selection } from "./utils/selection_utils";
 
-	export let value: string | number;
+	export let value: CellValue;
 	export let index: number;
 	export let j: number;
 	export let actual_pinned_columns: number;

package/shared/TableHeader.svelte

@@ -9,8 +9,11 @@
 	import type { SortDirection } from "./context/dataframe_context";
 	import CellMenuIcons from "./CellMenuIcons.svelte";
 	import type { FilterDatatype } from "./context/dataframe_context";
+	import type { Datatype } from "./utils/utils";
+	import { BaseCheckbox } from "@gradio/checkbox";
 	export let value: string;
 	export let i: number;
+	export let datatype: Datatype = "str";
 	export let actual_pinned_columns: number;
 	export let header_edit: number | false;
 	export let selected_header: number | false;
@@ -39,8 +42,24 @@
 	export let el: HTMLTextAreaElement | null;
 	export let is_static: boolean;
 	export let col_count: [number, "fixed" | "dynamic"];
+	export let data: any[] = [];
+	export let on_select_all:
+		| ((col: number, checked: boolean) => void)
+		| undefined = undefined;
 
 	$: can_add_columns = col_count && col_count[1] === "dynamic";
+	$: is_bool_column = datatype === "bool";
+
+	$: select_all_state = (() => {
+		if (!is_bool_column || data.length === 0) return "unchecked";
+		const true_count = data.filter(
+			(row) => row[i]?.value === true || row[i]?.value === "true"
+		).length;
+		if (true_count === 0) return "unchecked";
+		if (true_count === data.length) return "checked";
+		return "indeterminate";
+	})();
+
 	$: sort_index = sort_columns.findIndex((item) => item.col === i);
 	$: filter_index = filter_columns.findIndex((item) => item.col === i);
 	$: sort_priority = sort_index !== -1 ? sort_index + 1 : null;
@@ -88,6 +107,33 @@
 >
 	<div class="cell-wrap">
 		<div class="header-content">
+			{#if is_bool_column && editable && on_select_all}
+				<div
+					class="select-all-checkbox"
+					role="button"
+					tabindex="0"
+					on:click|stopPropagation
+					on:keydown|stopPropagation={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+						}
+					}}
+					on:mousedown|stopPropagation
+				>
+					<BaseCheckbox
+						value={select_all_state === "checked"}
+						indeterminate={select_all_state === "indeterminate"}
+						label=""
+						interactive={true}
+						on:select={() => {
+							if (on_select_all) {
+								const new_value = select_all_state !== "checked";
+								on_select_all(i, new_value);
+							}
+						}}
+					/>
+				</div>
+			{/if}
 			<button
 				class="header-button"
 				on:click={(event) => handle_header_click(event, i)}
@@ -279,4 +325,20 @@
 		z-index: 5;
 		border-right: none;
 	}
+
+	.select-all-checkbox {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: var(--size-1);
+		flex-shrink: 0;
+	}
+
+	.select-all-checkbox :global(label) {
+		margin: 0;
+	}
+
+	.select-all-checkbox :global(span) {
+		display: none;
+	}
 </style>

package/shared/context/dataframe_context.ts

@@ -2,6 +2,7 @@ import { getContext, setContext } from "svelte";
 import { dequal } from "dequal";
 import { writable, get } from "svelte/store";
 import { sort_table_data } from "../utils/table_utils";
+import type { CellValue } from "../types";
 import { tick } from "svelte";
 import {
 	handle_selection,
@@ -30,14 +31,14 @@ interface DataFrameState {
 		max_height: number;
 		column_widths: string[];
 		max_chars?: number;
-		static_columns?: (string | number)[];
+		static_columns?: CellValue[];
 	};
 	current_search_query: string | null;
 	sort_state: {
 		sort_columns: { col: number; direction: SortDirection }[];
 		row_order: number[];
 		initial_data: {
-			data: { id: string; value: string | number }[][];
+			data: { id: string; value: CellValue }[][];
 			display_value: string[][] | null;
 			styling: string[][] | null;
 		} | null;
@@ -50,7 +51,7 @@ interface DataFrameState {
 			value: string;
 		}[];
 		initial_data: {
-			data: { id: string; value: string | number }[][];
+			data: { id: string; value: CellValue }[][];
 			display_value: string[][] | null;
 			styling: string[][] | null;
 		} | null;
@@ -124,10 +125,10 @@ interface DataFrameActions {
 	trigger_change: (
 		data: any[][],
 		headers: any[],
-		previous_data: string[][],
+		previous_data: any[][],
 		previous_headers: string[],
 		value_is_output: boolean,
-		dispatch: (e: "change" | "input", detail?: any) => void
+		dispatch: (e: "change" | "input" | "edit", detail?: any) => void
 	) => Promise<void>;
 	reset_sort_state: () => void;
 	reset_filter_state: () => void;
@@ -183,10 +184,10 @@ export interface DataFrameContext {
 		{ cell: HTMLTableCellElement | null; input: HTMLTextAreaElement | null }
 	>;
 	parent_element?: HTMLElement;
-	get_data_at?: (row: number, col: number) => string | number;
-	get_column?: (col: number) => (string | number)[];
-	get_row?: (row: number) => (string | number)[];
-	dispatch?: (e: "change" | "select" | "search", detail?: any) => void;
+	get_data_at?: (row: number, col: number) => CellValue;
+	get_column?: (col: number) => CellValue[];
+	get_row?: (row: number) => CellValue[];
+	dispatch?: (e: "change" | "select" | "search" | "edit", detail?: any) => void;
 }
 
 function create_actions(
@@ -230,7 +231,7 @@ function create_actions(
 	};
 
 	const update_array = (
-		source: { id: string; value: string | number }[][] | string[][] | null,
+		source: { id: string; value: CellValue }[][] | string[][] | null,
 		target: any[] | null | undefined
 	): void => {
 		if (source && target) {
@@ -397,9 +398,7 @@ function create_actions(
 			if (s.current_search_query) return;
 
 			const current_headers = headers.map((h) => h.value);
-			const current_data = data.map((row) =>
-				row.map((cell) => String(cell.value))
-			);
+			const current_data = data.map((row) => row.map((cell) => cell.value));
 
 			if (
 				!dequal(current_data, previous_data) ||
@@ -416,6 +415,14 @@ function create_actions(
 					headers: current_headers,
 					metadata: null
 				});
+				const index = s.ui_state.selected;
+				if (index) {
+					dispatch("edit", {
+						index,
+						value: data[index[0]][index[1]].value,
+						previous_value: previous_data[index[0]][index[1]]
+					});
+				}
 				if (!value_is_output) dispatch("input");
 			}
 		},

package/shared/types.ts

@@ -9,9 +9,11 @@ export interface HeadersWithIDs {
 }
 [];
 
+export type CellValue = string | number | boolean;
+
 export interface TableCell {
 	id: string;
-	value: string | number;
+	value: CellValue;
 }
 
 export type TableData = TableCell[][];

package/shared/utils/data_processing.ts

@@ -1,4 +1,6 @@
-import type { Headers, HeadersWithIDs } from "./utils";
+import type { Datatype, Headers, HeadersWithIDs } from "./utils";
+import type { CellValue } from "../types";
+import { cast_value_to_type } from "./utils";
 
 export function make_headers(
 	_head: Headers,
@@ -35,15 +37,16 @@ export function make_headers(
 }
 
 export function process_data(
-	values: (string | number)[][],
+	values: CellValue[][],
 	els: Record<
 		string,
 		{ cell: null | HTMLTableCellElement; input: null | HTMLTextAreaElement }
 	>,
 	data_binding: Record<string, any>,
 	make_id: () => string,
-	display_value: string[][] | null = null
-): { id: string; value: string | number; display_value?: string }[][] {
+	display_value: string[][] | null = null,
+	datatype: Datatype | Datatype[]
+): { id: string; value: CellValue; display_value?: string }[][] {
 	if (!values || values.length === 0) {
 		return [];
 	}
@@ -60,9 +63,11 @@ export function process_data(
 				display = String(value);
 			}
 
+			const dtype = Array.isArray(datatype) ? datatype[j] : datatype;
+
 			return {
 				id: _id,
-				value,
+				value: cast_value_to_type(value, dtype),
 				display_value: display
 			};
 		});

package/shared/utils/filter_utils.ts

@@ -1,9 +1,10 @@
 import { filter_table_data } from "./table_utils";
+import type { CellValue } from "../types";
 
 export type FilterDatatype = "string" | "number";
 
 export function filter_data(
-	data: { id: string; value: string | number }[][],
+	data: { id: string; value: CellValue }[][],
 	filter_columns: {
 		col: number;
 		datatype: FilterDatatype;
@@ -164,7 +165,7 @@ export function filter_data(
 }
 
 export function filter_data_and_preserve_selection(
-	data: { id: string; value: string | number }[][],
+	data: { id: string; value: CellValue }[][],
 	display_value: string[][] | null,
 	styling: string[][] | null,
 	filter_columns: {
@@ -176,9 +177,9 @@ export function filter_data_and_preserve_selection(
 	selected: [number, number] | false,
 	get_current_indices: (
 		id: string,
-		data: { id: string; value: string | number }[][]
+		data: { id: string; value: CellValue }[][]
 	) => [number, number],
-	original_data?: { id: string; value: string | number }[][],
+	original_data?: { id: string; value: CellValue }[][],
 	original_display_value?: string[][] | null,
 	original_styling?: string[][] | null
 ): { data: typeof data; selected: [number, number] | false } {

package/shared/utils/keyboard_utils.ts

@@ -40,12 +40,7 @@ export async function handle_cell_blur(
 	const input_el = event.target as HTMLInputElement;
 	if (!input_el || input_el.value === undefined) return;
 
-	await save_cell_value(
-		input_el.type === "checkbox" ? String(input_el.checked) : input_el.value,
-		ctx,
-		coords[0],
-		coords[1]
-	);
+	await save_cell_value(input_el.value, ctx, coords[0], coords[1]);
 }
 
 function handle_header_navigation(

package/shared/utils/selection_utils.ts

@@ -1,6 +1,6 @@
-import type { CellCoordinate } from "./../types";
+import type { CellCoordinate, CellValue } from "./../types";
 
-export type CellData = { id: string; value: string | number };
+export type CellData = { id: string; value: CellValue };
 
 export function is_cell_in_selection(
 	coords: [number, number],
@@ -208,7 +208,7 @@ export function select_row(data: any[][], row: number): CellCoordinate[] {
 
 export function calculate_selection_positions(
 	selected: CellCoordinate,
-	data: { id: string; value: string | number }[][],
+	data: { id: string; value: CellValue }[][],
 	els: Record<string, { cell: HTMLTableCellElement | null }>,
 	parent: HTMLElement,
 	table: HTMLElement

package/shared/utils/sort_utils.ts

@@ -1,4 +1,4 @@
-import type { Headers } from "../types";
+import type { Headers, CellValue } from "../types";
 import { sort_table_data } from "./table_utils";
 
 export type SortDirection = "asc" | "desc";
@@ -21,7 +21,7 @@ export function get_sort_status(
 }
 
 export function sort_data(
-	data: { id: string; value: string | number }[][],
+	data: { id: string; value: CellValue }[][],
 	sort_columns: { col: number; direction: SortDirection }[]
 ): number[] {
 	if (!data || !data.length || !data[0]) {
@@ -64,14 +64,14 @@ export function sort_data(
 }
 
 export function sort_data_and_preserve_selection(
-	data: { id: string; value: string | number }[][],
+	data: { id: string; value: CellValue }[][],
 	display_value: string[][] | null,
 	styling: string[][] | null,
 	sort_columns: { col: number; direction: SortDirection }[],
 	selected: [number, number] | false,
 	get_current_indices: (
 		id: string,
-		data: { id: string; value: string | number }[][]
+		data: { id: string; value: CellValue }[][]
 	) => [number, number]
 ): { data: typeof data; selected: [number, number] | false } {
 	let id = null;