@gradio/dataframe 0.6.7 → 0.6.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gradio/dataframe
 
+## 0.6.8
+
+### Fixes
+
+- [#7564](https://github.com/gradio-app/gradio/pull/7564) [`5d1e8da`](https://github.com/gradio-app/gradio/commit/5d1e8dae5ac23f605c3b5f41dbe18751dff380a0) - batch UI updates on a per frame basis.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/upload@0.8.0
+- @gradio/markdown@0.6.6
+- @gradio/button@0.2.26
+
 ## 0.6.7
 
 ### Dependency updates

package/Dataframe.stories.svelte

@@ -24,15 +24,12 @@
 <Story
 	name="Interactive dataframe"
 	args={{
-		value: {
-			data: [
-				["Cat", 5],
-				["Horse", 3],
-				["Snake", 1]
-			],
-			headers: ["Animal", "Votes"],
-			metadata: null
-		},
+		values: [
+			["Cat", 5],
+			["Horse", 3],
+			["Snake", 1]
+		],
+		headers: ["Animal", "Votes"],
 		label: "Animals",
 		col_count: [2, "dynamic"],
 		row_count: [3, "dynamic"]
@@ -42,15 +39,12 @@
 <Story
 	name="Interactive dataframe with label"
 	args={{
-		value: {
-			data: [
-				["Cat", 5],
-				["Horse", 3],
-				["Snake", 1]
-			],
-			headers: ["Animal", "Votes"],
-			metadata: null
-		},
+		values: [
+			["Cat", 5],
+			["Horse", 3],
+			["Snake", 1]
+		],
+		headers: ["Animal", "Votes"],
 		label: "Animals",
 		show_label: true,
 		col_count: [2, "dynamic"],
@@ -61,15 +55,13 @@
 <Story
 	name="Interactive dataframe no label"
 	args={{
-		value: {
-			data: [
-				["Cat", 5],
-				["Horse", 3],
-				["Snake", 1]
-			],
-			headers: ["Animal", "Votes"],
-			metadata: null
-		},
+		values: [
+			["Cat", 5],
+			["Horse", 3],
+			["Snake", 1]
+		],
+		headers: ["Animal", "Votes"],
+		metadata: null,
 		label: "Animals",
 		show_label: false,
 		col_count: [2, "dynamic"],
@@ -80,15 +72,13 @@
 <Story
 	name="Static dataframe"
 	args={{
-		value: {
-			data: [
-				["Cat", 5],
-				["Horse", 3],
-				["Snake", 1]
-			],
-			headers: ["Animal", "Votes"],
-			metadata: null
-		},
+		values: [
+			["Cat", 5],
+			["Horse", 3],
+			["Snake", 1]
+		],
+		headers: ["Animal", "Votes"],
+
 		label: "Animals",
 		col_count: [2, "dynamic"],
 		row_count: [3, "dynamic"],
@@ -99,19 +89,15 @@
 <Story
 	name="Dataframe with different precisions"
 	args={{
-		value: {
-			data: [
-				[1.24, 1.24, 1.24],
-				[1.21, 1.21, 1.21]
-			],
-			headers: ["Precision=0", "Precision=1", "Precision=2"],
-			metadata: {
-				display_value: [
-					["1", "1.2", "1.24"],
-					["1", "1.2", "1.21"]
-				]
-			}
-		},
+		values: [
+			[1.24, 1.24, 1.24],
+			[1.21, 1.21, 1.21]
+		],
+		headers: ["Precision=0", "Precision=1", "Precision=2"],
+		display_value: [
+			["1", "1.2", "1.24"],
+			["1", "1.2", "1.21"]
+		],
 		label: "Numbers",
 		col_count: [3, "dynamic"],
 		row_count: [2, "dynamic"],
@@ -122,15 +108,12 @@
 <Story
 	name="Dataframe with markdown and math"
 	args={{
-		value: {
-			data: [
-				["Linear", "$y=x$", "Has a *maximum*  of 1 root"],
-				["Quadratic", "$y=x^2$", "Has a *maximum*  of 2 roots"],
-				["Cubic", "$y=x^3$", "Has a *maximum*  of 3 roots"]
-			],
-			headers: ["Type", "Example", "Roots"],
-			metadata: null
-		},
+		values: [
+			["Linear", "$y=x$", "Has a *maximum*  of 1 root"],
+			["Quadratic", "$y=x^2$", "Has a *maximum*  of 2 roots"],
+			["Cubic", "$y=x^3$", "Has a *maximum*  of 3 roots"]
+		],
+		headers: ["Type", "Example", "Roots"],
 		datatype: ["str", "markdown", "markdown"],
 		latex_delimiters: [{ left: "$", right: "$", display: false }],
 		label: "Math",
@@ -143,23 +126,20 @@
 <Story
 	name="Dataframe with different colors"
 	args={{
-		value: {
-			data: [
-				[800, 100, 800],
-				[200, 800, 700]
+		values: [
+			[800, 100, 800],
+			[200, 800, 700]
+		],
+		headers: ["Math", "Reading", "Writing"],
+
+		styling: [
+			[
+				"background-color:teal; color: white",
+				"1.2",
+				"background-color:teal; color: white"
 			],
-			headers: ["Math", "Reading", "Writing"],
-			metadata: {
-				styling: [
-					[
-						"background-color:teal; color: white",
-						"1.2",
-						"background-color:teal; color: white"
-					],
-					["1", "background-color:teal; color: white", "1.21"]
-				]
-			}
-		},
+			["1", "background-color:teal; color: white", "1.21"]
+		],
 		label: "Test scores",
 		col_count: [3, "dynamic"],
 		row_count: [2, "dynamic"],
@@ -170,13 +150,11 @@
 <Story
 	name="Dataframe with column widths"
 	args={{
-		value: {
-			data: [
-				[800, 100, 800],
-				[200, 800, 700]
-			],
-			headers: ["Narrow", "Wide", "Half"]
-		},
+		values: [
+			[800, 100, 800],
+			[200, 800, 700]
+		],
+		headers: ["Narrow", "Wide", "Half"],
 		label: "Test scores",
 		col_count: [3, "dynamic"],
 		row_count: [2, "dynamic"],

package/Index.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-	import { afterUpdate } from "svelte";
+	import { afterUpdate, tick } from "svelte";
 	import type { Gradio, SelectData } from "@gradio/utils";
 	import { Block } from "@gradio/atoms";
 	import Table from "./shared/Table.svelte";
@@ -20,7 +20,7 @@
 		headers: ["1", "2", "3"],
 		metadata: null
 	};
-	let old_value: string = JSON.stringify(value);
+	let old_value = "";
 	export let value_is_output = false;
 	export let col_count: [number, "fixed" | "dynamic"];
 	export let row_count: [number, "fixed" | "dynamic"];
@@ -49,21 +49,44 @@
 	export let loading_status: LoadingStatus;
 	export let interactive: boolean;
 
-	function handle_change(): void {
+	let _headers: Headers;
+	let display_value: string[][] | null;
+	let styling: string[][] | null;
+	let values: (string | number)[][];
+	async function handle_change(data?: {
+		data: Data;
+		headers: Headers;
+		metadata: Metadata;
+	}): Promise<void> {
+		let _data = data || value;
+
+		_headers = [...(_data.headers || headers)];
+		values = _data.data ? [..._data.data] : [];
+		display_value = _data?.metadata?.display_value
+			? [..._data?.metadata?.display_value]
+			: null;
+		styling = _data?.metadata?.styling ? [..._data?.metadata?.styling] : null;
+		await tick();
+
 		gradio.dispatch("change");
 		if (!value_is_output) {
 			gradio.dispatch("input");
 		}
 	}
+
+	handle_change();
+
 	afterUpdate(() => {
 		value_is_output = false;
 	});
+
 	$: {
-		if (JSON.stringify(value) !== old_value) {
+		if (old_value && JSON.stringify(value) !== old_value) {
 			old_value = JSON.stringify(value);
 			handle_change();
 		}
 	}
+
 	if (
 		(Array.isArray(value) && value?.[0]?.length === 0) ||
 		value.data?.[0]?.length === 0
@@ -76,6 +99,18 @@
 			metadata: null
 		};
 	}
+
+	async function handle_value_change(data: {
+		data: Data;
+		headers: Headers;
+		metadata: Metadata;
+	}): Promise<void> {
+		if (JSON.stringify(data) !== old_value) {
+			value = { ...data };
+			old_value = JSON.stringify(value);
+			handle_change(data);
+		}
+	}
 </script>
 
 <Block
@@ -99,9 +134,11 @@
 		{show_label}
 		{row_count}
 		{col_count}
-		{value}
-		{headers}
-		on:change={interactive ? (e) => (value = e.detail) : () => {}}
+		{values}
+		{display_value}
+		{styling}
+		headers={_headers}
+		on:change={(e) => handle_value_change(e.detail)}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
 		{wrap}
 		{datatype}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/dataframe",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -18,11 +18,11 @@
     "katex": "^0.16.7",
     "marked": "^12.0.0",
     "@gradio/atoms": "^0.5.3",
-    "@gradio/markdown": "^0.6.5",
-    "@gradio/upload": "^0.7.7",
-    "@gradio/utils": "^0.3.0",
+    "@gradio/button": "^0.2.26",
+    "@gradio/markdown": "^0.6.6",
     "@gradio/statustracker": "^0.4.8",
-    "@gradio/button": "^0.2.25"
+    "@gradio/upload": "^0.8.0",
+    "@gradio/utils": "^0.3.0"
   },
   "exports": {
     ".": "./Index.svelte",

package/shared/Table.svelte

@@ -21,8 +21,7 @@
 	export let label: string | null = null;
 	export let show_label = true;
 	export let headers: Headers = [];
-	let values: (string | number)[][];
-	export let value: { data: Data; headers: Headers; metadata: Metadata } | null;
+	export let values: (string | number)[][] = [];
 	export let col_count: [number, "fixed" | "dynamic"];
 	export let row_count: [number, "fixed" | "dynamic"];
 	export let latex_delimiters: {
@@ -41,21 +40,10 @@
 	export let column_widths: string[] = [];
 
 	let selected: false | [number, number] = false;
-	let display_value: string[][] | null = value?.metadata?.display_value ?? null;
-	let styling: string[][] | null = value?.metadata?.styling ?? null;
+	export let display_value: string[][] | null = null;
+	export let styling: string[][] | null = null;
 	let t_rect: DOMRectReadOnly;
 
-	$: {
-		if (value) {
-			headers = value.headers;
-			values = value.data;
-			display_value = value?.metadata?.display_value ?? null;
-			styling = value?.metadata?.styling ?? null;
-		} else if (values === null) {
-			values = [];
-		}
-	}
-
 	const dispatch = createEventDispatcher<{
 		change: {
 			data: (string | number)[][];
@@ -69,6 +57,7 @@
 
 	const get_data_at = (row: number, col: number): string | number =>
 		data?.[row]?.[col]?.value;
+
 	$: {
 		if (selected !== false) {
 			const [row, col] = selected;
@@ -77,6 +66,7 @@
 			}
 		}
 	}
+
 	let els: Record<
 		string,
 		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
@@ -87,6 +77,7 @@
 	function make_id(): string {
 		return Math.random().toString(36).substring(2, 15);
 	}
+
 	function make_headers(_head: Headers): HeadersWithIDs {
 		let _h = _head || [];
 		if (col_count[1] === "fixed" && _h.length < col_count[0]) {
@@ -105,6 +96,7 @@
 					return { id: _id, value: JSON.stringify(i + 1) };
 				});
 		}
+
 		return _h.map((h, i) => {
 			const _id = make_id();
 			els[_id] = { cell: null, input: null };
@@ -157,7 +149,9 @@
 		_headers = make_headers(headers);
 
 		old_headers = headers.slice();
+		trigger_change();
 	}
+
 	$: if (!dequal(values, old_val)) {
 		data = process_data(values as (string | number)[][]);
 		old_val = values as (string | number)[][];
@@ -167,7 +161,7 @@
 
 	let old_val: undefined | (string | number)[][] = undefined;
 
-	$: _headers &&
+	async function trigger_change(): Promise<void> {
 		dispatch("change", {
 			data: data.map((r) => r.map(({ value }) => value)),
 			headers: _headers.map((h) => h.value),
@@ -175,6 +169,7 @@
 				? null
 				: { display_value: display_value, styling: styling }
 		});
+	}
 
 	function get_sort_status(
 		name: string,
@@ -425,6 +420,8 @@
 		selected = [index ? index + 1 : data.length - 1, 0];
 	}
 
+	$: data && trigger_change();
+
 	async function add_col(): Promise<void> {
 		parent.focus();
 		if (col_count[1] !== "dynamic") return;