@gradio/dataframe 0.20.1 → 0.21.0-dev.3

package/dist/Index.svelte

@@ -1,105 +1,127 @@
 <svelte:options accessors={true} />
 
-<script context="module">export { default as BaseDataFrame } from "./shared/Table.svelte";
-export { default as BaseExample } from "./Example.svelte";
+<script context="module" lang="ts">
+	export { default as BaseDataFrame } from "./shared/Table.svelte";
+	export { default as BaseExample } from "./Example.svelte";
 </script>
 
-<script>import { Block } from "@gradio/atoms";
-import Table from "./shared/Table.svelte";
-import { StatusTracker } from "@gradio/statustracker";
-import Image from "@gradio/image";
-export let elem_id = "";
-export let elem_classes = [];
-export let visible = true;
-export let value = {
-  data: [["", "", ""]],
-  headers: ["1", "2", "3"],
-  metadata: null
-};
-export let value_is_output = false;
-export let col_count;
-export let row_count;
-export let label = null;
-export let show_label = true;
-export let wrap;
-export let datatype;
-export let scale = null;
-export let min_width = void 0;
-export let root;
-export let line_breaks = true;
-export let column_widths = [];
-export let gradio;
-export let latex_delimiters;
-export let max_height = void 0;
-export let loading_status;
-export let interactive;
-export let show_fullscreen_button = false;
-export let max_chars = void 0;
-export let show_copy_button = false;
-export let show_row_numbers = false;
-export let show_search = "none";
-export let pinned_columns = 0;
-export let static_columns = [];
-export let fullscreen = false;
+<script lang="ts">
+	import type { SharedProps } from "@gradio/utils";
+	import { Gradio } from "@gradio/utils";
+
+	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
+	};
+	$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,
+
+				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/Index.svelte.d.ts

@@ -1,170 +1,6 @@
-import { SvelteComponent } from "svelte";
 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 { Datatype, DataframeValue } from "./shared/utils/utils";
-declare const __propDef: {
-    props: {
-        elem_id?: string;
-        elem_classes?: string[];
-        visible?: boolean | "hidden";
-        value?: DataframeValue;
-        value_is_output?: boolean;
-        col_count: [number, "fixed" | "dynamic"];
-        row_count: [number, "fixed" | "dynamic"];
-        label?: string | null;
-        show_label?: boolean;
-        wrap: boolean;
-        datatype: Datatype | Datatype[];
-        scale?: number | null;
-        min_width?: number | undefined;
-        root: string;
-        line_breaks?: boolean;
-        column_widths?: string[];
-        gradio: Gradio<{
-            change: never;
-            select: SelectData;
-            input: never;
-            clear_status: LoadingStatus;
-            search: string | null;
-            edit: SelectData;
-        }>;
-        latex_delimiters: {
-            left: string;
-            right: string;
-            display: boolean;
-        }[];
-        max_height?: number | undefined;
-        loading_status: LoadingStatus;
-        interactive: boolean;
-        show_fullscreen_button?: boolean;
-        max_chars?: number | undefined;
-        show_copy_button?: boolean;
-        show_row_numbers?: boolean;
-        show_search?: "none" | "search" | "filter";
-        pinned_columns?: number;
-        static_columns?: (string | number)[];
-        fullscreen?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-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 elem_id(): string | undefined;
-    /**accessor*/
-    set elem_id(_: string | undefined);
-    get elem_classes(): string[] | undefined;
-    /**accessor*/
-    set elem_classes(_: string[] | undefined);
-    get visible(): boolean | "hidden" | undefined;
-    /**accessor*/
-    set visible(_: boolean | "hidden" | 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;
-        search: string | null;
-        edit: SelectData;
-    }>;
-    /**accessor*/
-    set gradio(_: Gradio<{
-        change: never;
-        select: SelectData;
-        input: never;
-        clear_status: LoadingStatus;
-        search: string | null;
-        edit: SelectData;
-    }>);
-    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);
-    get max_chars(): number | undefined;
-    /**accessor*/
-    set max_chars(_: number | undefined);
-    get show_copy_button(): boolean | undefined;
-    /**accessor*/
-    set show_copy_button(_: boolean | undefined);
-    get show_row_numbers(): boolean | undefined;
-    /**accessor*/
-    set show_row_numbers(_: boolean | undefined);
-    get show_search(): "none" | "filter" | "search" | undefined;
-    /**accessor*/
-    set show_search(_: "none" | "filter" | "search" | undefined);
-    get pinned_columns(): number | undefined;
-    /**accessor*/
-    set pinned_columns(_: number | undefined);
-    get static_columns(): (string | number)[] | undefined;
-    /**accessor*/
-    set static_columns(_: (string | number)[] | undefined);
-    get fullscreen(): boolean | undefined;
-    /**accessor*/
-    set fullscreen(_: boolean | undefined);
-}
+import "@gradio/dataframe-interim/css";
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/shared/BooleanCell.svelte

@@ -1,12 +1,15 @@
-<script>import { BaseCheckbox } from "@gradio/checkbox";
-export let value = false;
-export let editable = true;
-export let on_change;
-function handle_change(event) {
-  if (editable) {
-    on_change(event.detail);
-  }
-}
+<script lang="ts">
+	import { BaseCheckbox } from "@gradio/checkbox";
+
+	export let value = false;
+	export let editable = true;
+	export let on_change: (value: boolean) => void;
+
+	function handle_change(event: CustomEvent<boolean>): void {
+		if (editable) {
+			on_change(event.detail);
+		}
+	}
 </script>
 
 <div class="bool-cell" role="button" tabindex="-1">

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

@@ -1,20 +1,22 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value?: boolean;
-        editable?: boolean;
-        on_change: (value: boolean) => void;
+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 BooleanCellProps = typeof __propDef.props;
-export type BooleanCellEvents = typeof __propDef.events;
-export type BooleanCellSlots = typeof __propDef.slots;
-export default class BooleanCell extends SvelteComponent<BooleanCellProps, BooleanCellEvents, BooleanCellSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const BooleanCell: $$__sveltets_2_IsomorphicComponent<{
+    value?: boolean;
+    editable?: boolean;
+    on_change: (value: boolean) => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BooleanCell = InstanceType<typeof BooleanCell>;
+export default BooleanCell;

package/dist/shared/CellMenu.svelte

@@ -1,67 +1,85 @@
-<script>import { onMount } from "svelte";
-import CellMenuIcons from "./CellMenuIcons.svelte";
-import FilterMenu from "./FilterMenu.svelte";
-export let x;
-export let y;
-export let on_add_row_above;
-export let on_add_row_below;
-export let on_add_column_left;
-export let on_add_column_right;
-export let row;
-export let col_count;
-export let row_count;
-export let on_delete_row;
-export let on_delete_col;
-export let can_delete_rows;
-export let can_delete_cols;
-export let on_sort = () => {
-};
-export let on_clear_sort = () => {
-};
-export let sort_direction = null;
-export let sort_priority = null;
-export let on_filter = () => {
-};
-export let on_clear_filter = () => {
-};
-export let filter_active = null;
-export let editable = true;
-export let i18n;
-let menu_element;
-let active_filter_menu = null;
-$: is_header = row === -1;
-$: can_add_rows = editable && row_count[1] === "dynamic";
-$: can_add_columns = editable && col_count[1] === "dynamic";
-onMount(() => {
-  position_menu();
-});
-function position_menu() {
-  if (!menu_element) return;
-  const viewport_width = window.innerWidth;
-  const viewport_height = window.innerHeight;
-  const menu_rect = menu_element.getBoundingClientRect();
-  let new_x = x - 30;
-  let new_y = y - 20;
-  if (new_x + menu_rect.width > viewport_width) {
-    new_x = x - menu_rect.width + 10;
-  }
-  if (new_y + menu_rect.height > viewport_height) {
-    new_y = y - menu_rect.height + 10;
-  }
-  menu_element.style.left = `${new_x}px`;
-  menu_element.style.top = `${new_y}px`;
-}
-function toggle_filter_menu() {
-  if (filter_active) {
-    on_filter("string", "", "");
-    return;
-  }
-  const menu_rect = menu_element.getBoundingClientRect();
-  active_filter_menu = {
-    x: menu_rect.right,
-    y: menu_rect.top + menu_rect.height / 2
-  };
-}
+<script lang="ts">
+	import { onMount } from "svelte";
+	import CellMenuIcons from "./CellMenuIcons.svelte";
+	import FilterMenu from "./FilterMenu.svelte";
+	import type { I18nFormatter } from "@gradio/utils";
+	import type {
+		SortDirection,
+		FilterDatatype
+	} from "./context/dataframe_context";
+
+	export let x: number;
+	export let y: number;
+	export let on_add_row_above: () => void;
+	export let on_add_row_below: () => void;
+	export let on_add_column_left: () => void;
+	export let on_add_column_right: () => void;
+	export let row: number;
+	export let col_count: [number, "fixed" | "dynamic"];
+	export let row_count: [number, "fixed" | "dynamic"];
+	export let on_delete_row: () => void;
+	export let on_delete_col: () => void;
+	export let can_delete_rows: boolean;
+	export let can_delete_cols: boolean;
+	export let on_sort: (direction: SortDirection) => void = () => {};
+	export let on_clear_sort: () => void = () => {};
+	export let sort_direction: SortDirection | null = null;
+	export let sort_priority: number | null = null;
+	export let on_filter: (
+		datatype: FilterDatatype,
+		selected_filter: string,
+		value: string
+	) => void = () => {};
+	export let on_clear_filter: () => void = () => {};
+	export let filter_active: boolean | null = null;
+	export let editable = true;
+
+	export let i18n: I18nFormatter;
+	let menu_element: HTMLDivElement;
+	let active_filter_menu: { x: number; y: number } | null = null;
+
+	$: is_header = row === -1;
+	$: can_add_rows = editable && row_count[1] === "dynamic";
+	$: can_add_columns = editable && col_count[1] === "dynamic";
+
+	onMount(() => {
+		position_menu();
+	});
+
+	function position_menu(): void {
+		if (!menu_element) return;
+
+		const viewport_width = window.innerWidth;
+		const viewport_height = window.innerHeight;
+		const menu_rect = menu_element.getBoundingClientRect();
+
+		let new_x = x - 30;
+		let new_y = y - 20;
+
+		if (new_x + menu_rect.width > viewport_width) {
+			new_x = x - menu_rect.width + 10;
+		}
+
+		if (new_y + menu_rect.height > viewport_height) {
+			new_y = y - menu_rect.height + 10;
+		}
+
+		menu_element.style.left = `${new_x}px`;
+		menu_element.style.top = `${new_y}px`;
+	}
+
+	function toggle_filter_menu(): void {
+		if (filter_active) {
+			on_filter("string", "", "");
+			return;
+		}
+
+		const menu_rect = menu_element.getBoundingClientRect();
+		active_filter_menu = {
+			x: menu_rect.right,
+			y: menu_rect.top + menu_rect.height / 2
+		};
+	}
 </script>
 
 <div bind:this={menu_element} class="cell-menu" role="menu">