@gradio/dataframe 0.20.1 → 0.21.0-dev.3

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @gradio/dataframe
 
+## 0.21.0-dev.3
+
+### Dependency updates
+
+- @gradio/markdown-code@0.5.2
+- @gradio/atoms@0.19.0-dev.1
+- @gradio/client@2.0.0-dev.2
+- @gradio/statustracker@0.12.0-dev.1
+- @gradio/button@0.5.14-dev.2
+- @gradio/upload@0.17.2-dev.2
+- @gradio/dataframe-interim@0.21.0-dev.3
+- @gradio/checkbox@0.5.0-dev.1
+
+## 0.21.0-dev.2
+
+### Features
+
+- [#12357](https://github.com/gradio-app/gradio/pull/12357) [`c9cf634`](https://github.com/gradio-app/gradio/commit/c9cf634a9cd34b4adadde1a6a98d60faf732639a) - Fix various event issues.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/dataframe-interim@0.21.0-dev.2
+
+## 0.21.0-dev.1
+
+### Features
+
+- [#12110](https://github.com/gradio-app/gradio/pull/12110) [`e80fc6f`](https://github.com/gradio-app/gradio/commit/e80fc6f9eba1b895680b19803bbd15e7e303d969) - Fix issue with boolean columns in dataframe.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/atoms@0.18.2-dev.0
+- @gradio/upload@0.17.2-dev.1
+- @gradio/utils@0.10.3-dev.0
+- @gradio/button@0.5.14-dev.1
+- @gradio/statustracker@0.12.0-dev.0
+- @gradio/icons@0.15.0-dev.0
+- @gradio/checkbox@0.5.0-dev.0
+
+## 0.20.2-dev.0
+
+### Dependency updates
+
+- @gradio/client@2.0.0-dev.1
+
+## 0.20.2-dev.0
+
+### Dependency updates
+
+- @gradio/upload@0.17.2-dev.0
+- @gradio/client@2.0.0-dev.0
+- @gradio/button@0.5.14-dev.0
+
+## 0.20.1
+
+### Dependency updates
+
+- @gradio/client@1.19.1
+
 ## 0.20.1
 
 ### Fixes

package/Dataframe.stories.svelte

@@ -439,31 +439,6 @@
 	}}
 />
 
-<Story
-	name="Dataframe with custom components"
-	args={{
-		values: [
-			[
-				"Absol G",
-				70,
-				"https://images.pokemontcg.io/pl3/1_hires.png",
-				"pl3-1",
-				"Supreme Victors"
-			]
-		],
-		datatype: ["str", "number", "image", "str", "str"],
-		headers: ["Pokemon", "HP", "Image", "ID", "Set"],
-		label: "Pokemon Cards",
-		col_count: [5, "fixed"],
-		row_count: [1, "dynamic"],
-		editable: true,
-		editable: true,
-		components: {
-			image: Image
-		}
-	}}
-/>
-
 <Story
 	name="Dataframe with row and column selection"
 	args={{

package/Example.svelte

@@ -23,22 +23,26 @@
 			{value}
 		{:else if is_empty}
 			<table class="">
-				<tr>
-					<td>Empty</td>
-				</tr>
+				<tbody>
+					<tr>
+						<td>Empty</td>
+					</tr>
+				</tbody>
 			</table>
 		{:else}
 			<table class="">
-				{#each value.slice(0, 3) as row, i}
-					<tr>
-						{#each row.slice(0, 3) as cell, j}
-							<td>{cell}</td>
-						{/each}
-						{#if row.length > 3}
-							<td>…</td>
-						{/if}
-					</tr>
-				{/each}
+				<tbody>
+					{#each value.slice(0, 3) as row, i}
+						<tr>
+							{#each row.slice(0, 3) as cell, j}
+								<td>{cell}</td>
+							{/each}
+							{#if row.length > 3}
+								<td>…</td>
+							{/if}
+						</tr>
+					{/each}
+				</tbody>
 			</table>
 			{#if value.length > 3}
 				<div

package/Index.svelte

@@ -6,118 +6,122 @@
 </script>
 
 <script lang="ts">
-	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 { Datatype, DataframeValue } from "./shared/utils/utils";
-	import Image from "@gradio/image";
+	import type { SharedProps } from "@gradio/utils";
+	import { Gradio } from "@gradio/utils";
 
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let value: DataframeValue = {
-		data: [["", "", ""]],
-		headers: ["1", "2", "3"],
-		metadata: null
+	import type { DataframeProps, DataframeEvents } from "./types";
+	import { dequal } from "dequal";
+	import { onMount } from "svelte";
+	import DF from "@gradio/dataframe-interim";
+	import "@gradio/dataframe-interim/css";
+
+	let prev_data: any = null;
+
+	let changed = false;
+
+	class DataframeGradio extends Gradio<DataframeEvents, DataframeProps> {
+		async set_data(data: Partial<DataframeProps & SharedProps>): Promise<void> {
+			console.log("DataframeGradio set_data called", data);
+			if (data.value) {
+				changed = true;
+			}
+
+			super.set_data(data);
+			if (data.value && dequal(data.value, JSON.parse(prev_data)) === false) {
+				// this.dispatch("change");
+				prev_data = JSON.stringify(data.value);
+			}
+		}
+	}
+
+	let props = $props();
+
+	let gradio = new DataframeGradio(props);
+	let el: HTMLDivElement;
+	let Component: typeof DF | null = null;
+	onMount(() => {
+		Component = new DF({
+			target: el,
+			props: {
+				elem_id: gradio.shared.elem_id,
+				elem_classes: gradio.shared.elem_classes,
+				visible: gradio.shared.visible,
+				value: gradio.props.value,
+
+				col_count: gradio.props.col_count,
+				row_count: gradio.props.row_count,
+				label: gradio.shared.label,
+				show_label: gradio.shared.show_label,
+				wrap: gradio.props.wrap,
+				datatype: gradio.props.datatype,
+				scale: gradio.shared.scale,
+				min_width: gradio.shared.min_width,
+				root: gradio.shared.root,
+				line_breaks: gradio.props.line_breaks,
+				column_widths: gradio.props.column_widths,
+				gradio: compat_gradio,
+				latex_delimiters: gradio.props.latex_delimiters,
+				max_height: gradio.props.max_height,
+				loading_status: gradio.shared.loading_status,
+				interactive: gradio.shared.interactive,
+				buttons: gradio.props.buttons,
+				max_chars: gradio.props.max_chars,
+				show_row_numbers: gradio.props.show_row_numbers,
+				show_search: gradio.props.show_search,
+				pinned_columns: gradio.props.pinned_columns,
+				static_columns: gradio.props.static_columns,
+				fullscreen: gradio.props.fullscreen
+			}
+		});
+	});
+
+	const compat_gradio = {
+		i18n: gradio.i18n,
+		client: gradio.shared.client,
+		dispatch(name: keyof DataframeEvents, detail?: any) {
+			if (name === "input" && changed) {
+				console.log("Skipping duplicate input event");
+				changed = false;
+				return;
+			}
+			gradio.dispatch(name, detail);
+		},
+		autoscroll: gradio.shared.autoscroll
 	};
-	export let value_is_output = false;
-	export let col_count: [number, "fixed" | "dynamic"];
-	export let row_count: [number, "fixed" | "dynamic"];
-	export let label: string | null = null;
-	export let show_label = true;
-	export let wrap: boolean;
-	export let datatype: Datatype | Datatype[];
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let root: string;
+	$effect(() => {
+		if (Component) {
+			Component.$set({
+				elem_id: gradio.shared.elem_id,
+				elem_classes: gradio.shared.elem_classes,
+				visible: gradio.shared.visible,
+				value: gradio.props.value,
 
-	export let line_breaks = true;
-	export let column_widths: string[] = [];
-	export let gradio: Gradio<{
-		change: never;
-		select: SelectData;
-		input: never;
-		clear_status: LoadingStatus;
-		search: string | null;
-		edit: SelectData;
-	}>;
-	export let latex_delimiters: {
-		left: string;
-		right: string;
-		display: boolean;
-	}[];
-	export let max_height: number | undefined = undefined;
-	export let loading_status: LoadingStatus;
-	export let interactive: boolean;
-	export let show_fullscreen_button = false;
-	export let max_chars: number | undefined = undefined;
-	export let show_copy_button = false;
-	export let show_row_numbers = false;
-	export let show_search: "none" | "search" | "filter" = "none";
-	export let pinned_columns = 0;
-	export let static_columns: (string | number)[] = [];
-	export let fullscreen = false;
+				col_count: gradio.props.col_count,
+				row_count: gradio.props.row_count,
+				label: gradio.shared.label,
+				show_label: gradio.shared.show_label,
+				wrap: gradio.props.wrap,
+				datatype: gradio.props.datatype,
+				scale: gradio.shared.scale,
+				min_width: gradio.shared.min_width,
+				root: gradio.shared.root,
+				line_breaks: gradio.props.line_breaks,
+				column_widths: gradio.props.column_widths,
+				gradio: compat_gradio,
+				latex_delimiters: gradio.props.latex_delimiters,
+				max_height: gradio.props.max_height,
+				loading_status: gradio.shared.loading_status,
+				interactive: gradio.shared.interactive,
+				buttons: gradio.props.buttons,
+				max_chars: gradio.props.max_chars,
+				show_row_numbers: gradio.props.show_row_numbers,
+				show_search: gradio.props.show_search,
+				pinned_columns: gradio.props.pinned_columns,
+				static_columns: gradio.props.static_columns,
+				fullscreen: gradio.props.fullscreen
+			});
+		}
+	});
 </script>
 
-<Block
-	{visible}
-	padding={false}
-	{elem_id}
-	{elem_classes}
-	container={false}
-	{scale}
-	{min_width}
-	overflow_behavior="visible"
-	bind:fullscreen
->
-	<StatusTracker
-		autoscroll={gradio.autoscroll}
-		i18n={gradio.i18n}
-		{...loading_status}
-		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
-	/>
-	<Table
-		{root}
-		{label}
-		{show_label}
-		{row_count}
-		{col_count}
-		values={value.data}
-		display_value={value.metadata?.display_value}
-		styling={value.metadata?.styling}
-		headers={value.headers}
-		{fullscreen}
-		on:change={(e) => {
-			value.data = e.detail.data;
-			value.headers = e.detail.headers;
-			gradio.dispatch("change");
-		}}
-		on:input={(e) => gradio.dispatch("input")}
-		on:select={(e) => gradio.dispatch("select", e.detail)}
-		on:edit={(e) => gradio.dispatch("edit", e.detail)}
-		on:fullscreen={({ detail }) => {
-			fullscreen = detail;
-		}}
-		{wrap}
-		{datatype}
-		{latex_delimiters}
-		editable={interactive}
-		{max_height}
-		i18n={gradio.i18n}
-		{line_breaks}
-		{column_widths}
-		upload={(...args) => gradio.client.upload(...args)}
-		stream_handler={(...args) => gradio.client.stream(...args)}
-		bind:value_is_output
-		{show_fullscreen_button}
-		{max_chars}
-		{show_copy_button}
-		{show_row_numbers}
-		{show_search}
-		{pinned_columns}
-		components={{ image: Image }}
-		{static_columns}
-	/>
-</Block>
+<div bind:this={el} />

package/dist/Example.svelte

@@ -1,10 +1,12 @@
-<script>export let value;
-export let type;
-export let selected = false;
-export let index;
-let hovered = false;
-let loaded = Array.isArray(value);
-let is_empty = loaded && (value.length === 0 || value[0].length === 0);
+<script lang="ts">
+	export let value: (string | number)[][] | string;
+	export let type: "gallery" | "table";
+	export let selected = false;
+	export let index: number;
+
+	let hovered = false;
+	let loaded = Array.isArray(value);
+	let is_empty = loaded && (value.length === 0 || value[0].length === 0);
 </script>
 
 {#if loaded}
@@ -21,22 +23,26 @@ let is_empty = loaded && (value.length === 0 || value[0].length === 0);
 			{value}
 		{:else if is_empty}
 			<table class="">
-				<tr>
-					<td>Empty</td>
-				</tr>
+				<tbody>
+					<tr>
+						<td>Empty</td>
+					</tr>
+				</tbody>
 			</table>
 		{:else}
 			<table class="">
-				{#each value.slice(0, 3) as row, i}
-					<tr>
-						{#each row.slice(0, 3) as cell, j}
-							<td>{cell}</td>
-						{/each}
-						{#if row.length > 3}
-							<td>…</td>
-						{/if}
-					</tr>
-				{/each}
+				<tbody>
+					{#each value.slice(0, 3) as row, i}
+						<tr>
+							{#each row.slice(0, 3) as cell, j}
+								<td>{cell}</td>
+							{/each}
+							{#if row.length > 3}
+								<td>…</td>
+							{/if}
+						</tr>
+					{/each}
+				</tbody>
 			</table>
 			{#if value.length > 3}
 				<div

package/dist/Example.svelte.d.ts

@@ -1,21 +1,23 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value: (string | number)[][] | string;
-        type: "gallery" | "table";
-        selected?: boolean;
-        index: number;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ExampleProps = typeof __propDef.props;
-export type ExampleEvents = typeof __propDef.events;
-export type ExampleSlots = typeof __propDef.slots;
-export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Example: $$__sveltets_2_IsomorphicComponent<{
+    value: (string | number)[][] | string;
+    type: "gallery" | "table";
+    selected?: boolean;
+    index: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Example = InstanceType<typeof Example>;
+export default Example;