@gradio/core 1.0.0 → 1.0.2

package/src/init.svelte.ts

@@ -5,6 +5,7 @@ import {
 } from "./init_utils";
 import { translate_if_needed } from "./i18n";
 import { tick } from "svelte";
+import { dequal } from "dequal";
 
 import type {
 	ComponentMeta,
@@ -15,7 +16,7 @@ import type {
 	AppConfig,
 	ServerFunctions
 } from "./types";
-import type { SharedProps } from "@gradio/utils";
+import { type SharedProps } from "@gradio/utils";
 import { allowed_shared_props } from "@gradio/utils";
 import { Client } from "@gradio/client";
 
@@ -33,6 +34,7 @@ type Tab = {
 	elem_id: string | undefined;
 	scale: number | null;
 	order?: number;
+	component_id: number;
 };
 
 const type_map = {
@@ -54,6 +56,7 @@ export class AppTree {
 
 	/** the root node of the processed layout tree */
 	root = $state<ProcessedComponentMeta>();
+	root_untracked: ProcessedComponentMeta;
 
 	/** a set of all component IDs that are inputs to dependencies */
 	#input_ids: Set<number> = new Set();
@@ -65,6 +68,7 @@ export class AppTree {
 
 	#get_callbacks = new Map<number, get_data_type>();
 	#set_callbacks = new Map<number, set_data_type>();
+	#event_dispatcher: (id: number, event: string, data: unknown) => void;
 	component_ids: number[];
 	initial_tabs: Record<number, Tab[]> = {};
 
@@ -72,21 +76,25 @@ export class AppTree {
 	ready: Promise<void>;
 	ready_resolve!: () => void;
 	resolved: boolean = false;
+	#hidden_on_startup: Set<number> = new Set();
 
 	constructor(
 		components: ComponentMeta[],
 		layout: LayoutNode,
 		dependencies: Dependency[],
-		config: AppConfig,
+		config: Omit<AppConfig, "api_url">,
 		app: client_return,
-		reactive_formatter: (str: string) => string
+		reactive_formatter: (str: string) => string,
+		event_dispatcher: (id: number, event: string, data: unknown) => void
 	) {
 		this.ready = new Promise<void>((resolve) => {
 			this.ready_resolve = resolve;
 		});
 		this.reactive_formatter = reactive_formatter;
-
-		this.#config = config;
+		this.#config = {
+			...config,
+			api_url: new URL(config.api_prefix, config.root).toString()
+		};
 		this.#component_payload = components;
 		this.#layout_payload = layout;
 		this.#dependency_payload = dependencies;
@@ -123,17 +131,22 @@ export class AppTree {
 		this.initial_tabs = {};
 		gather_initial_tabs(this.root!, this.initial_tabs);
 		this.postprocess(this.root!);
+		this.#event_dispatcher = event_dispatcher;
+		this.root_untracked = this.root;
 	}
 
 	reload(
 		components: ComponentMeta[],
 		layout: LayoutNode,
 		dependencies: Dependency[],
-		config: AppConfig
+		config: Omit<AppConfig, "api_url">
 	) {
 		this.#layout_payload = layout;
 		this.#component_payload = components;
-		this.#config = config;
+		this.#config = {
+			...config,
+			api_url: new URL(config.api_prefix, config.root).toString()
+		};
 		this.#dependency_payload = dependencies;
 
 		this.root = this.create_node(
@@ -203,22 +216,22 @@ export class AppTree {
 
 	postprocess(tree: ProcessedComponentMeta) {
 		this.root = this.traverse(tree, [
-			(node) => handle_visibility(node, this.#config.root),
+			(node) => handle_visibility(node, this.#config.api_url),
 			(node) =>
 				untrack_children_of_invisible_parents(
 					node,
-					this.#config.root,
 					this.components_to_register
 				),
+			(node) => handle_empty_forms(node, this.components_to_register),
+			(node) => translate_props(node),
+			(node) => apply_initial_tabs(node, this.initial_tabs),
+			(node) => this.find_attached_events(node, this.#dependency_payload),
 			(node) =>
-				handle_empty_forms(
+				untrack_children_of_closed_accordions_or_inactive_tabs(
 					node,
-					this.#config.root,
-					this.components_to_register
-				),
-			(node) => translate_props(node, this.#config.root),
-			(node) => apply_initial_tabs(node, this.#config.root, this.initial_tabs),
-			(node) => this.find_attached_events(node, this.#dependency_payload)
+					this.components_to_register,
+					this.#hidden_on_startup
+				)
 		]);
 	}
 
@@ -317,6 +330,7 @@ export class AppTree {
 			component.props,
 			[this.#input_ids, this.#output_ids],
 			this.client,
+			this.#config.api_url,
 			{ ...this.#config }
 		);
 
@@ -335,14 +349,14 @@ export class AppTree {
 					? get_component(
 							component.type,
 							component.component_class_id,
-							this.#config.root || ""
+							this.#config.api_url || ""
 						)
 					: null,
 			key: component.key,
 			rendered_in: component.rendered_in,
-			documentation: component.documentation
+			documentation: component.documentation,
+			original_visibility: processed_props.shared_props.visible
 		};
-
 		return node;
 	}
 
@@ -369,6 +383,19 @@ export class AppTree {
 		n.children = subtree.children;
 	}
 
+	async update_visibility(
+		node: ProcessedComponentMeta,
+		new_state: any
+	): Promise<void> {
+		node.children.forEach((child) => {
+			const _set_data = this.#set_callbacks.get(child.id);
+			if (_set_data) {
+				_set_data(new_state);
+			}
+			this.update_visibility(child, new_state);
+		});
+	}
+
 	/*
 	 * Updates the state of a component by its ID
 	 * @param id the ID of the component to update
@@ -391,20 +418,42 @@ export class AppTree {
 			this.root = this.traverse(this.root!, [
 				//@ts-ignore
 				(n) => set_visibility_for_updated_node(n, id, new_state.visible),
-				(n) => handle_visibility(n, this.#config.root)
+				//@ts-ignore
+				(n) => update_parent_visibility(n, id, new_state.visible),
+				(n) => handle_visibility(n, this.#config.api_url)
 			]);
+			await tick();
 			already_updated_visibility = true;
 		}
 		const _set_data = this.#set_callbacks.get(id);
-		if (!_set_data) return;
-		_set_data(new_state);
+		if (!_set_data) {
+			const old_value = node?.props.props.value;
+			// @ts-ignore
+			const new_props = create_props_shared_props(new_state);
+			node!.props.shared_props = {
+				...node?.props.shared_props,
+				...new_props.shared_props
+			};
+			node!.props.props = { ...node?.props.props, ...new_props.props };
+			if ("value" in new_state && !dequal(old_value, new_state.value)) {
+				this.#event_dispatcher(id, "change", null);
+			}
+		} else if (_set_data) {
+			_set_data(new_state);
+		}
 		if (!check_visibility || already_updated_visibility) return;
 		// need to let the UI settle before traversing again
 		// otherwise there could be
 		await tick();
-		this.root = this.traverse(this.root!, (n) =>
-			handle_visibility(n, this.#config.root)
-		);
+		// Update the visibility in a way that does not
+		// re-render the root/tree. Doing that would nuke
+		// any values currently in the UI.
+		// @ts-ignore
+		await this.update_visibility(node, new_state);
+		const parent_node = find_parent(this.root!, id);
+		if (parent_node)
+			// @ts-ignore
+			update_parent_visibility(parent_node, id, new_state.visible);
 	}
 
 	/**
@@ -414,14 +463,39 @@ export class AppTree {
 	 */
 	async get_state(id: number): Promise<Record<string, unknown> | null> {
 		const _get_data = this.#get_callbacks.get(id);
-		const component = this.#component_payload.find((c) => c.id === id);
+		const component = find_node_by_id(this.root!, id);
 		if (!_get_data && !component) return null;
 		if (_get_data) return await _get_data();
 
-		if (component) return Promise.resolve({ value: component.props.value });
+		if (component)
+			return Promise.resolve({ value: component.props.props.value });
 
 		return null;
 	}
+
+	async render_previously_invisible_children(id: number) {
+		this.root = this.traverse(this.root!, [
+			(node) => {
+				if (node.id === id) {
+					make_visible_if_not_rendered(node, this.#hidden_on_startup);
+				}
+				return node;
+			},
+			(node) => handle_visibility(node, this.#config.api_url)
+		]);
+	}
+}
+
+function make_visible_if_not_rendered(
+	node: ProcessedComponentMeta,
+	hidden_on_startup: Set<number>
+): void {
+	node.props.shared_props.visible = hidden_on_startup.has(node.id)
+		? true
+		: node.props.shared_props.visible;
+	node.children.forEach((child) => {
+		make_visible_if_not_rendered(child, hidden_on_startup);
+	});
 }
 
 /**
@@ -451,6 +525,27 @@ export function process_server_fn(
 	}, {} as ServerFunctions);
 }
 
+function create_props_shared_props(props: ComponentMeta["props"]): {
+	shared_props: SharedProps;
+	props: Record<string, unknown>;
+} {
+	const _shared_props: Partial<SharedProps> = {};
+	const _props: Record<string, unknown> = {};
+	for (const key in props) {
+		// For Tabs (or any component that already has an id prop)
+		// Set the id to the props so that it doesn't get overwritten
+		if (key === "id" || key === "autoscroll") {
+			_props[key] = props[key];
+		} else if (allowed_shared_props.includes(key as keyof SharedProps)) {
+			const _key = key as keyof SharedProps;
+			_shared_props[_key] = props[key];
+		} else {
+			_props[key] = props[key];
+		}
+	}
+	return { shared_props: _shared_props as SharedProps, props: _props };
+}
+
 /**
  * Gathers the props for a component
  * @param id the ID of the component
@@ -464,28 +559,15 @@ function gather_props(
 	props: ComponentMeta["props"],
 	dependencies: [Set<number>, Set<number>],
 	client: client_return,
+	api_url: string,
 	additional: Record<string, unknown> = {}
 ): {
 	shared_props: SharedProps;
 	props: Record<string, unknown>;
 } {
-	const _shared_props: Partial<SharedProps> = {};
-	const _props: Record<string, unknown> = {};
-	for (const key in props) {
-		// For Tabs (or any component that already has an id prop)
-		// Set the id to the props so that it doesn't get overwritten
-		if (key === "id" || key === "autoscroll") {
-			_props[key] = props[key];
-		} else if (allowed_shared_props.includes(key as keyof SharedProps)) {
-			const _key = key as keyof SharedProps;
-			_shared_props[_key] = props[key];
-			if (_key === "server_fns") {
-				_shared_props.server = process_server_fn(id, props.server_fns, client);
-			}
-		} else {
-			_props[key] = props[key];
-		}
-	}
+	const { shared_props: _shared_props, props: _props } =
+		create_props_shared_props(props);
+	_shared_props.server = process_server_fn(id, props.server_fns, client);
 
 	for (const key in additional) {
 		if (allowed_shared_props.includes(key as keyof SharedProps)) {
@@ -508,13 +590,7 @@ function gather_props(
 	_shared_props.load_component = (
 		name: string,
 		variant: "base" | "component" | "example"
-	) =>
-		get_component(
-			name,
-			"",
-			_shared_props.root || "",
-			variant
-		) as LoadingComponent;
+	) => get_component(name, "", api_url, variant) as LoadingComponent;
 
 	_shared_props.visible =
 		_shared_props.visible === undefined ? true : _shared_props.visible;
@@ -525,19 +601,19 @@ function gather_props(
 
 function handle_visibility(
 	node: ProcessedComponentMeta,
-	root: string
+	api_url: string
 ): ProcessedComponentMeta {
 	// Check if the node is visible
 	if (node.props.shared_props.visible && !node.component) {
 		const result: ProcessedComponentMeta = {
 			...node,
-			component: get_component(node.type, node.component_class_id, root),
+			component: get_component(node.type, node.component_class_id, api_url),
 			children: []
 		};
 
 		if (node.children) {
 			result.children = node.children.map((child) =>
-				handle_visibility(child, root)
+				handle_visibility(child, api_url)
 			);
 		}
 		return result;
@@ -570,7 +646,6 @@ function _untrack(
 
 function untrack_children_of_invisible_parents(
 	node: ProcessedComponentMeta,
-	root: string,
 	components_to_register: Set<number>
 ): ProcessedComponentMeta {
 	// Check if the node is visible
@@ -580,9 +655,51 @@ function untrack_children_of_invisible_parents(
 	return node;
 }
 
+function mark_component_invisible_if_visible(
+	node: ProcessedComponentMeta,
+	hidden_on_startup: Set<number>
+): ProcessedComponentMeta {
+	if (node.props.shared_props.visible === true) {
+		hidden_on_startup.add(node.id);
+		node.props.shared_props.visible = false;
+	}
+	node.children.forEach((child) => {
+		mark_component_invisible_if_visible(child, hidden_on_startup);
+	});
+	return node;
+}
+
+function untrack_children_of_closed_accordions_or_inactive_tabs(
+	node: ProcessedComponentMeta,
+	components_to_register: Set<number>,
+	hidden_on_startup: Set<number>
+): ProcessedComponentMeta {
+	// Check if the node is an accordion or tabs
+	if (node.type === "accordion" && node.props.props.open === false) {
+		_untrack(node, components_to_register);
+		if (node.children) {
+			node.children.forEach((child) => {
+				mark_component_invisible_if_visible(child, hidden_on_startup);
+			});
+		}
+	}
+	if (node.type === "tabs") {
+		node.children.forEach((child) => {
+			if (
+				child.type === "tabitem" &&
+				child.props.props.id !==
+					(node.props.props.selected || node.props.props.initial_tabs[0].id)
+			) {
+				_untrack(child, components_to_register);
+				mark_component_invisible_if_visible(child, hidden_on_startup);
+			}
+		});
+	}
+	return node;
+}
+
 function handle_empty_forms(
 	node: ProcessedComponentMeta,
-	root: string,
 	components_to_register: Set<number>
 ): ProcessedComponentMeta {
 	// Check if the node is visible
@@ -601,10 +718,34 @@ function handle_empty_forms(
 	return node;
 }
 
-function translate_props(
+function update_parent_visibility(
 	node: ProcessedComponentMeta,
-	root: string
+	child_made_visible: number,
+	visibility_state: boolean | "hidden"
 ): ProcessedComponentMeta {
+	// This function was added to address a tricky situation:
+	// Form components are wrapped in a Form component automatically.
+	// If all the children of the Form are invisible, the Form itself is marked invisible.
+	// in AppTree.postprocess -> handle_empty_forms
+	// This is to avoid rendering empty forms in the UI. They look ugly.
+	// So what happens when a child inside the Form is made visible again?
+	// The Form needs to become visible again too.
+	// If the child is made invisible, the form should be too if all other children are invisible.
+	// However, we are not doing this now since what we want to do is fetch the latest visibility of all
+	// the children from the UI. However, get_data only returns the props, not the shared props.
+	if (
+		node.type === "form" &&
+		node.children.length &&
+		node.children.some((child) => child.id === child_made_visible)
+	) {
+		if (visibility_state === true) node.props.shared_props.visible = true;
+		else if (!visibility_state && node.children.length === 1)
+			node.props.shared_props.visible = "hidden";
+	}
+	return node;
+}
+
+function translate_props(node: ProcessedComponentMeta): ProcessedComponentMeta {
 	const supported_props = [
 		"description",
 		"info",
@@ -631,12 +772,13 @@ function translate_props(
 
 function apply_initial_tabs(
 	node: ProcessedComponentMeta,
-	root: string,
 	initial_tabs: Record<number, Tab[]>
 ): ProcessedComponentMeta {
 	if (node.type === "tabs" && node.id in initial_tabs) {
 		const tabs = initial_tabs[node.id].sort((a, b) => a.order! - b.order!);
 		node.props.props.initial_tabs = tabs;
+	} else if (node.type === "tabitem") {
+		node.props.props.component_id = node.id;
 	}
 	return node;
 }
@@ -660,7 +802,8 @@ function _gather_initial_tabs(
 			elem_id: node.props.shared_props.elem_id,
 			visible: node.props.shared_props.visible as boolean,
 			interactive: node.props.shared_props.interactive,
-			scale: node.props.shared_props.scale || null
+			scale: node.props.shared_props.scale || null,
+			component_id: node.id
 		});
 		node.props.props.order = order;
 	}
@@ -715,3 +858,21 @@ function find_node_by_id(
 
 	return null;
 }
+
+function find_parent(
+	tree: ProcessedComponentMeta,
+	id: number
+): ProcessedComponentMeta | null {
+	if (tree.children) {
+		for (const child of tree.children) {
+			if (child.id === id) {
+				return tree;
+			}
+			const result = find_parent(child, id);
+			if (result) {
+				return result;
+			}
+		}
+	}
+	return null;
+}

package/src/init.test.ts

@@ -10,7 +10,7 @@ import {
 	determine_interactivity,
 	process_server_fn,
 	get_component
-} from "./init";
+} from "./_init";
 
 describe("process_frontend_fn", () => {
 	test("empty source code returns null", () => {

package/src/types.ts

@@ -32,6 +32,7 @@ export interface ProcessedComponentMeta {
 	component_class_id: string; // ?;
 	key: string | number | null; // ?;
 	rendered_in?: number; // ?;
+	original_visibility: boolean | "hidden";
 }
 
 /** Dictates whether a dependency is continous and/or a generator */
@@ -126,4 +127,5 @@ export interface AppConfig {
 	max_file_size?: number;
 	autoscroll: boolean;
 	api_prefix: string;
+	api_url: string;
 }