@gradio/dataframe 0.12.7 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @gradio/dataframe
 
+## 0.13.0
+
+### Features
+
+- [#10377](https://github.com/gradio-app/gradio/pull/10377) [`feb1e81`](https://github.com/gradio-app/gradio/commit/feb1e81ecabf34fd3f9ec228dcf3bdaa4b0bd75e) - Add toolbar with fullscreen button to `gr.Dataframe`.  Thanks @hannahblair!
+- [#10376](https://github.com/gradio-app/gradio/pull/10376) [`2b7ba48`](https://github.com/gradio-app/gradio/commit/2b7ba4801398b6dd6b72496ea50245a0cd6852d6) - Add `show_row_numbers` param to gr.Dataframe.  Thanks @hannahblair!
+- [#10410](https://github.com/gradio-app/gradio/pull/10410) [`48809c7`](https://github.com/gradio-app/gradio/commit/48809c722bcbb3aaed72edfdb6c59de5413fdbc4) - Fix bug where dataframe `value` prop was not updating when an input value was changed manually.  Thanks @abidlabs!
+
+### Fixes
+
+- [#10365](https://github.com/gradio-app/gradio/pull/10365) [`40e0c48`](https://github.com/gradio-app/gradio/commit/40e0c4832060cef457406896b2ad94639888897a) - Ensure clicking on a cell once enables editing mode.  Thanks @hannahblair!
+- [#10348](https://github.com/gradio-app/gradio/pull/10348) [`62cd4ef`](https://github.com/gradio-app/gradio/commit/62cd4ef302cd7529d1f8842b416f9d8fcf6b5750) - Handle `row_count=0` in gr.Dataframe.  Thanks @hannahblair!
+- [#10403](https://github.com/gradio-app/gradio/pull/10403) [`3219382`](https://github.com/gradio-app/gradio/commit/3219382eeea0a0047c74e0cdd2bf333e69f8f806) - Fix event triggers and recent regressions related to `gr.DataFrame`.  Thanks @abidlabs!
+- [#10360](https://github.com/gradio-app/gradio/pull/10360) [`31cccc3`](https://github.com/gradio-app/gradio/commit/31cccc3e79a3d1b4a840610d9becb235f8829b13) - Fix logic for detecting changes in `gr.Dataframe` table value.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/upload@0.14.6
+- @gradio/button@0.4.2
+- @gradio/statustracker@0.10.2
+
 ## 0.12.7
 
 ### Dependency updates

package/Dataframe.stories.svelte

@@ -166,6 +166,18 @@
 	}}
 />
 
+<Story
+	name="Dataframe with zero row count"
+	args={{
+		values: [],
+		headers: ["Narrow", "Wide", "Half"],
+		label: "Test scores",
+		col_count: [0, "dynamic"],
+		row_count: [0, "dynamic"],
+		editable: false
+	}}
+/>
+
 <Story
 	name="Dataframe with dialog interactions"
 	args={{
@@ -194,3 +206,17 @@
 		userEvent.click(new_cell);
 	}}
 />
+
+<Story
+	name="Dataframe with fullscreen button"
+	args={{
+		col_count: [3, "dynamic"],
+		row_count: [2, "dynamic"],
+		headers: ["Math", "Reading", "Writing"],
+		values: [
+			[800, 100, 400],
+			[200, 800, 700]
+		],
+		show_fullscreen_button: true
+	}}
+/>

package/Dataframe.test.ts

@@ -0,0 +1,37 @@
+import { test, describe, assert, afterEach, vi } from "vitest";
+import { cleanup, render } from "@self/tootils";
+import { setupi18n } from "../core/src/i18n";
+import Dataframe from "./Index.svelte";
+
+describe("Dataframe", () => {
+	beforeEach(setupi18n);
+	afterEach(() => {
+		cleanup();
+	});
+
+	test("changing value triggers change event", async () => {
+		await setupi18n();
+		const { component, listen } = await render(Dataframe, {
+			headers: ["A", "B", "C"],
+			values: [
+				["1", "2", "3"],
+				["4", "5", "6"]
+			],
+			col_count: [3, "fixed"],
+			row_count: [2, "fixed"],
+			editable: true,
+			datatype: "str",
+			root: ""
+		});
+		const mock = listen("change");
+		component.value = {
+			data: [
+				["11", "22", "33"],
+				["44", "55", "66"]
+			],
+			headers: ["A", "B", "C"],
+			metadata: null
+		};
+		assert.equal(mock.callCount, 1);
+	});
+});

package/Index.svelte

@@ -1,26 +1,26 @@
+<svelte:options accessors={true} />
+
 <script context="module" lang="ts">
 	export { default as BaseDataFrame } from "./shared/Table.svelte";
 	export { default as BaseExample } from "./Example.svelte";
 </script>
 
 <script lang="ts">
-	import { afterUpdate, tick } from "svelte";
 	import type { Gradio, SelectData } from "@gradio/utils";
 	import { Block } from "@gradio/atoms";
 	import Table from "./shared/Table.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
 	import type { LoadingStatus } from "@gradio/statustracker";
-	import type { Headers, Data, Metadata, Datatype } from "./shared/utils";
+	import type { Headers, Datatype, DataframeValue } from "./shared/utils";
 	export let headers: Headers = [];
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let value: { data: Data; headers: Headers; metadata: Metadata } = {
+	export let value: DataframeValue = {
 		data: [["", "", ""]],
 		headers: ["1", "2", "3"],
 		metadata: null
 	};
-	let old_value = "";
 	export let value_is_output = false;
 	export let col_count: [number, "fixed" | "dynamic"];
 	export let row_count: [number, "fixed" | "dynamic"];
@@ -46,75 +46,19 @@
 		display: boolean;
 	}[];
 	export let max_height: number | undefined = undefined;
-
 	export let loading_status: LoadingStatus;
 	export let interactive: boolean;
+	export let show_fullscreen_button = false;
 
-	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]
+	$: _headers = [...(value.headers || headers)];
+	$: cell_values = value.data ? [...value.data] : [];
+	$: display_value = value?.metadata?.display_value
+		? [...value?.metadata?.display_value]
+		: null;
+	$: styling =
+		!interactive && value?.metadata?.styling
+			? [...value?.metadata?.styling]
 			: null;
-		styling =
-			!interactive && _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 (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
-	) {
-		value = {
-			data: [Array(col_count?.[0] || 3).fill("")],
-			headers: Array(col_count?.[0] || 3)
-				.fill("")
-				.map((_, i) => `${i + 1}`),
-			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
@@ -139,11 +83,15 @@
 		{show_label}
 		{row_count}
 		{col_count}
-		{values}
+		values={cell_values}
 		{display_value}
 		{styling}
 		headers={_headers}
-		on:change={(e) => handle_value_change(e.detail)}
+		on:change={(e) => {
+			value = e.detail;
+			gradio.dispatch("change");
+		}}
+		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
 		{wrap}
 		{datatype}
@@ -155,5 +103,7 @@
 		{column_widths}
 		upload={(...args) => gradio.client.upload(...args)}
 		stream_handler={(...args) => gradio.client.stream(...args)}
+		bind:value_is_output
+		{show_fullscreen_button}
 	/>
 </Block>

package/dist/Index.svelte

@@ -1,9 +1,10 @@
+<svelte:options accessors={true} />
+
 <script context="module">export { default as BaseDataFrame } from "./shared/Table.svelte";
 export { default as BaseExample } from "./Example.svelte";
 </script>
 
-<script>import { afterUpdate, tick } from "svelte";
-import { Block } from "@gradio/atoms";
+<script>import { Block } from "@gradio/atoms";
 import Table from "./shared/Table.svelte";
 import { StatusTracker } from "@gradio/statustracker";
 export let headers = [];
@@ -15,7 +16,6 @@ export let value = {
   headers: ["1", "2", "3"],
   metadata: null
 };
-let old_value = "";
 export let value_is_output = false;
 export let col_count;
 export let row_count;
@@ -33,46 +33,15 @@ export let latex_delimiters;
 export let max_height = void 0;
 export let loading_status;
 export let interactive;
-let _headers;
-let display_value;
-let styling;
-let values;
-async function handle_change(data) {
-  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 = !interactive && _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 (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) {
-  value = {
-    data: [Array(col_count?.[0] || 3).fill("")],
-    headers: Array(col_count?.[0] || 3).fill("").map((_, i) => `${i + 1}`),
-    metadata: null
-  };
-}
-async function handle_value_change(data) {
-  if (JSON.stringify(data) !== old_value) {
-    value = { ...data };
-    old_value = JSON.stringify(value);
-    handle_change(data);
-  }
-}
+export let show_fullscreen_button = false;
+$:
+  _headers = [...value.headers || headers];
+$:
+  cell_values = value.data ? [...value.data] : [];
+$:
+  display_value = value?.metadata?.display_value ? [...value?.metadata?.display_value] : null;
+$:
+  styling = !interactive && value?.metadata?.styling ? [...value?.metadata?.styling] : null;
 </script>
 
 <Block
@@ -97,11 +66,15 @@ async function handle_value_change(data) {
 		{show_label}
 		{row_count}
 		{col_count}
-		{values}
+		values={cell_values}
 		{display_value}
 		{styling}
 		headers={_headers}
-		on:change={(e) => handle_value_change(e.detail)}
+		on:change={(e) => {
+			value = e.detail;
+			gradio.dispatch("change");
+		}}
+		on:input={(e) => gradio.dispatch("input")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
 		{wrap}
 		{datatype}
@@ -113,5 +86,7 @@ async function handle_value_change(data) {
 		{column_widths}
 		upload={(...args) => gradio.client.upload(...args)}
 		stream_handler={(...args) => gradio.client.stream(...args)}
+		bind:value_is_output
+		{show_fullscreen_button}
 	/>
 </Block>

package/dist/Index.svelte.d.ts

@@ -3,18 +3,14 @@ export { default as BaseDataFrame } from "./shared/Table.svelte";
 export { default as BaseExample } from "./Example.svelte";
 import type { Gradio, SelectData } from "@gradio/utils";
 import type { LoadingStatus } from "@gradio/statustracker";
-import type { Headers, Data, Metadata, Datatype } from "./shared/utils";
+import type { Headers, Datatype, DataframeValue } from "./shared/utils";
 declare const __propDef: {
     props: {
         headers?: Headers | undefined;
         elem_id?: string | undefined;
         elem_classes?: string[] | undefined;
         visible?: boolean | undefined;
-        value?: {
-            data: Data;
-            headers: Headers;
-            metadata: Metadata;
-        } | undefined;
+        value?: DataframeValue | undefined;
         value_is_output?: boolean | undefined;
         col_count: [number, "fixed" | "dynamic"];
         row_count: [number, "fixed" | "dynamic"];
@@ -41,6 +37,7 @@ declare const __propDef: {
         max_height?: number | undefined;
         loading_status: LoadingStatus;
         interactive: boolean;
+        show_fullscreen_button?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -51,4 +48,91 @@ export type IndexProps = typeof __propDef.props;
 export type IndexEvents = typeof __propDef.events;
 export type IndexSlots = typeof __propDef.slots;
 export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
+    get headers(): Headers | undefined;
+    /**accessor*/
+    set headers(_: Headers | undefined);
+    get elem_id(): string | undefined;
+    /**accessor*/
+    set elem_id(_: string | undefined);
+    get elem_classes(): string[] | undefined;
+    /**accessor*/
+    set elem_classes(_: string[] | undefined);
+    get visible(): boolean | undefined;
+    /**accessor*/
+    set visible(_: boolean | undefined);
+    get value(): DataframeValue | undefined;
+    /**accessor*/
+    set value(_: DataframeValue | undefined);
+    get value_is_output(): boolean | undefined;
+    /**accessor*/
+    set value_is_output(_: boolean | undefined);
+    get col_count(): [number, "fixed" | "dynamic"];
+    /**accessor*/
+    set col_count(_: [number, "fixed" | "dynamic"]);
+    get row_count(): [number, "fixed" | "dynamic"];
+    /**accessor*/
+    set row_count(_: [number, "fixed" | "dynamic"]);
+    get label(): string | null | undefined;
+    /**accessor*/
+    set label(_: string | null | undefined);
+    get show_label(): boolean | undefined;
+    /**accessor*/
+    set show_label(_: boolean | undefined);
+    get wrap(): boolean;
+    /**accessor*/
+    set wrap(_: boolean);
+    get datatype(): Datatype | Datatype[];
+    /**accessor*/
+    set datatype(_: Datatype | Datatype[]);
+    get scale(): number | null | undefined;
+    /**accessor*/
+    set scale(_: number | null | undefined);
+    get min_width(): number | undefined;
+    /**accessor*/
+    set min_width(_: number | undefined);
+    get root(): string;
+    /**accessor*/
+    set root(_: string);
+    get line_breaks(): boolean | undefined;
+    /**accessor*/
+    set line_breaks(_: boolean | undefined);
+    get column_widths(): string[] | undefined;
+    /**accessor*/
+    set column_widths(_: string[] | undefined);
+    get gradio(): Gradio<{
+        change: never;
+        select: SelectData;
+        input: never;
+        clear_status: LoadingStatus;
+    }>;
+    /**accessor*/
+    set gradio(_: Gradio<{
+        change: never;
+        select: SelectData;
+        input: never;
+        clear_status: LoadingStatus;
+    }>);
+    get latex_delimiters(): {
+        left: string;
+        right: string;
+        display: boolean;
+    }[];
+    /**accessor*/
+    set latex_delimiters(_: {
+        left: string;
+        right: string;
+        display: boolean;
+    }[]);
+    get max_height(): number | undefined;
+    /**accessor*/
+    set max_height(_: number | undefined);
+    get loading_status(): LoadingStatus;
+    /**accessor*/
+    set loading_status(_: LoadingStatus);
+    get interactive(): boolean;
+    /**accessor*/
+    set interactive(_: boolean);
+    get show_fullscreen_button(): boolean | undefined;
+    /**accessor*/
+    set show_fullscreen_button(_: boolean | undefined);
 }

package/dist/shared/EditableCell.svelte

@@ -8,7 +8,6 @@ export let header = false;
 export let datatype = "str";
 export let latex_delimiters;
 export let clear_on_focus = false;
-export let select_on_focus = false;
 export let line_breaks = true;
 export let editable = true;
 export let root;
@@ -20,10 +19,9 @@ function use_focus(node) {
   if (clear_on_focus) {
     _value = "";
   }
-  if (select_on_focus) {
-    node.select();
-  }
-  node.focus();
+  requestAnimationFrame(() => {
+    node.focus();
+  });
   return {};
 }
 function handle_blur({
@@ -49,6 +47,9 @@ function handle_keydown(event) {
 		class:header
 		tabindex="-1"
 		on:blur={handle_blur}
+		on:mousedown|stopPropagation
+		on:mouseup|stopPropagation
+		on:click|stopPropagation
 		use:use_focus
 		on:keydown={handle_keydown}
 	/>
@@ -61,6 +62,8 @@ function handle_keydown(event) {
 	class:edit
 	on:focus|preventDefault
 	style={styling}
+	class="table-cell-text"
+	placeholder=" "
 >
 	{#if datatype === "html"}
 		{@html value}
@@ -89,6 +92,7 @@ function handle_keydown(event) {
 		outline: none;
 		border: none;
 		background: transparent;
+		cursor: text;
 	}
 
 	span {
@@ -99,11 +103,12 @@ function handle_keydown(event) {
 		-moz-user-select: text;
 		-ms-user-select: text;
 		user-select: text;
+		cursor: text;
 	}
 
 	.header {
 		transform: translateX(0);
-		font: var(--weight-bold);
+		font-weight: var(--weight-bold);
 	}
 
 	.edit {

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

@@ -13,13 +13,15 @@ declare const __propDef: {
             display: boolean;
         }[];
         clear_on_focus?: boolean | undefined;
-        select_on_focus?: boolean | undefined;
         line_breaks?: boolean | undefined;
         editable?: boolean | undefined;
         root: string;
         el: HTMLInputElement | null;
     };
     events: {
+        mousedown: MouseEvent;
+        mouseup: MouseEvent;
+        click: MouseEvent;
         dblclick: MouseEvent;
         focus: FocusEvent;
         blur: CustomEvent<any>;