@gradio/core 0.19.3 → 0.21.0

package/src/init.ts

@@ -73,6 +73,10 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 	let keys_per_render_id: Record<number, (string | number)[]> = {};
 	let _rootNode: ComponentMeta;
 
+	// Store current layout and root for dynamic visibility recalculation
+	let current_layout: LayoutNode;
+	let current_root: string;
+
 	function set_event_specific_args(dependencies: Dependency[]): void {
 		dependencies.forEach((dep) => {
 			dep.targets.forEach((target) => {
@@ -107,6 +111,15 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 		flush();
 		app = _app;
 
+		if (instance_map) {
+			// re-render in reload mode
+			components.forEach((c) => {
+				if (c.props.value == null && c.id in instance_map) {
+					c.props.value = instance_map[c.id].props.value;
+				}
+			});
+		}
+
 		_components = components;
 		inputs = new Set();
 		outputs = new Set();
@@ -116,6 +129,10 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 
 		instance_map = {};
 
+		// Store current layout and root for dynamic visibility recalculation
+		current_layout = layout;
+		current_root = root;
+
 		_rootNode = {
 			id: layout.id,
 			type: "column",
@@ -147,7 +164,7 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 
 		target_map.set(_target_map);
 
-		constructor_map = preload_all_components(components, root);
+		constructor_map = preload_visible_components(components, layout, root);
 
 		instance_map = components.reduce(
 			(acc, c) => {
@@ -179,6 +196,10 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 		root: string;
 		dependencies: Dependency[];
 	}): void {
+		// Update current layout and root for dynamic visibility recalculation
+		current_layout = layout;
+		current_root = root;
+
 		components.forEach((c) => {
 			for (const prop in c.props) {
 				if (c.props[prop] === null) {
@@ -195,7 +216,11 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 				replacement_components.push(c);
 			}
 		});
-		let _constructor_map = preload_all_components(new_components, root);
+		let _constructor_map = preload_visible_components(
+			new_components,
+			layout,
+			root
+		);
 		_constructor_map.forEach((v, k) => {
 			constructor_map.set(k, v);
 		});
@@ -293,12 +318,22 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 	): Promise<ComponentMeta> {
 		const instance = instance_map[node.id];
 		if (!instance.component) {
-			instance.component = (await constructor_map.get(
-				instance.component_class_id || instance.type
-			))!?.default;
+			const constructor_key = instance.component_class_id || instance.type;
+			let component_constructor = constructor_map.get(constructor_key);
+
+			// Only load component if it was preloaded (i.e., it's visible)
+			if (component_constructor) {
+				instance.component = (await component_constructor)?.default;
+			}
+			// If component wasn't preloaded, leave it unloaded for now
+			// It will be loaded later when/if it becomes visible
 		}
 		instance.parent = parent;
 
+		// if (instance.type === "timer") {
+		// 	console.log("timer", instance, constructor_map);
+		// }
+
 		if (instance.type === "dataset") {
 			instance.props.component_map = get_component(
 				instance.type,
@@ -357,7 +392,8 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 			instance.props.initial_tabs = child_tab_items?.map((child) => ({
 				label: child.props.label,
 				id: child.props.id,
-				visible: child.props.visible,
+				visible:
+					typeof child.props.visible === "boolean" ? child.props.visible : true,
 				interactive: child.props.interactive,
 				order: child.props.order
 			}));
@@ -376,7 +412,86 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 	let update_scheduled = false;
 	let update_scheduled_store = writable(false);
 
+	/**
+	 * Load newly visible components after visibility changes
+	 * @param newly_visible_ids Set of component IDs that are now visible
+	 */
+	async function load_newly_visible_components(
+		newly_visible_ids: Set<number>
+	): Promise<void> {
+		if (newly_visible_ids.size === 0) return;
+
+		const components_to_load = _components.filter((c) =>
+			newly_visible_ids.has(c.id)
+		);
+
+		for (const component of components_to_load) {
+			const constructor_key = component.component_class_id || component.type;
+
+			// Only load if not already loaded
+			if (!constructor_map.has(constructor_key)) {
+				const { component: loadable_component, example_components } =
+					get_component(
+						component.type,
+						component.component_class_id,
+						current_root,
+						_components
+					);
+
+				constructor_map.set(constructor_key, loadable_component);
+
+				if (example_components) {
+					for (const [name, example_component] of example_components) {
+						constructor_map.set(name, example_component);
+					}
+				}
+
+				// Load the component if it doesn't exist yet
+				if (!component.component) {
+					component.component = (await loadable_component)?.default;
+				}
+			} else {
+				component.component =
+					(await constructor_map.get(constructor_key))?.default ??
+					component.component;
+			}
+		}
+	}
+
+	/**
+	 * Check if any visibility-affecting properties have changed
+	 * @param updates Array of update transactions
+	 * @returns True if visibility might have changed
+	 */
+	function has_visibility_changes(updates: UpdateTransaction[][]): boolean {
+		return updates.some((update_batch) =>
+			update_batch.some((update) => {
+				const instance = instance_map[update.id];
+				if (!instance) return false;
+
+				// Check for visibility property changes
+				if (update.prop === "visible") return true;
+
+				// Check for selected tab changes in tabs components
+				if (update.prop === "selected" && instance.type === "tabs") return true;
+
+				return false;
+			})
+		);
+	}
+
 	function flush(): void {
+		const had_visibility_changes = has_visibility_changes(pending_updates);
+		let previous_visible_ids: Set<number> | undefined;
+
+		// Capture current visibility state before applying updates
+		if (had_visibility_changes && current_layout) {
+			previous_visible_ids = determine_visible_components(
+				current_layout,
+				_components
+			);
+		}
+
 		layout_store.update((layout) => {
 			for (let i = 0; i < pending_updates.length; i++) {
 				for (let j = 0; j < pending_updates[i].length; j++) {
@@ -398,6 +513,33 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 			}
 			return layout;
 		});
+
+		// After applying updates, check if we need to load new components
+		if (had_visibility_changes && current_layout && previous_visible_ids) {
+			raf(async () => {
+				const new_visible_ids = determine_visible_components(
+					current_layout,
+					_components
+				);
+				const newly_visible_ids = new Set<number>();
+
+				// Find components that are now visible but weren't before
+				for (const id of new_visible_ids) {
+					if (!previous_visible_ids!.has(id)) {
+						newly_visible_ids.add(id);
+					}
+				}
+
+				// Load the newly visible components
+				await load_newly_visible_components(newly_visible_ids);
+
+				// Trigger a layout update to render the newly loaded components
+				if (newly_visible_ids.size > 0) {
+					layout_store.update((layout) => layout);
+				}
+			});
+		}
+
 		pending_updates = [];
 		update_scheduled = false;
 		update_scheduled_store.set(false);
@@ -704,7 +846,219 @@ export function get_component(
 }
 
 /**
- * Preload all components
+ * Check if a tab item should be visible based on selection state
+ * @param component The tab item component
+ * @param component_visible Whether the component is visible
+ * @param parent_tabs_context Tab context from parent
+ * @returns Whether the tab item should be visible
+ */
+function is_tab_item_visible(
+	component: ComponentMeta,
+	component_visible: boolean,
+	parent_tabs_context?: { selected_tab_id?: string | number }
+): boolean {
+	const is_selected_tab =
+		parent_tabs_context?.selected_tab_id === component.id ||
+		parent_tabs_context?.selected_tab_id === component.props.id;
+	return component_visible && is_selected_tab;
+}
+
+/**
+ * Determine the selected tab ID for a tabs component
+ * @param component The tabs component
+ * @param layout The layout node
+ * @param components All components
+ * @returns The selected tab ID
+ */
+function get_selected_tab_id(
+	component: ComponentMeta,
+	layout: LayoutNode,
+	components: ComponentMeta[]
+): string | number | undefined {
+	// Check if selected prop is a string or number
+	const selected = component.props.selected;
+	if (typeof selected === "string" || typeof selected === "number") {
+		return selected;
+	}
+
+	// If no tab is explicitly selected, find the first visible and interactive tab
+	if (layout.children) {
+		for (const child of layout.children) {
+			const child_component = components.find((c) => c.id === child.id);
+			if (
+				child_component?.type === "tabitem" &&
+				child_component.props.visible !== false &&
+				child_component.props.interactive !== false
+			) {
+				return (
+					child_component.id || (child_component.props.id as string | number)
+				);
+			}
+		}
+	}
+
+	return undefined;
+}
+
+/**
+ * Process children components for visibility
+ * @param layout The layout node
+ * @param components All components
+ * @param parent_tabs_context Tab context
+ * @returns Set of visible child component IDs
+ */
+function process_children_visibility(
+	layout: LayoutNode,
+	components: ComponentMeta[],
+	parent_tabs_context?: { selected_tab_id?: string | number }
+): Set<number> {
+	const visible_components: Set<number> = new Set();
+
+	if (layout.children) {
+		for (const child of layout.children) {
+			const child_visible = determine_visible_components(
+				child,
+				components,
+				true,
+				parent_tabs_context
+			);
+			child_visible.forEach((id) => visible_components.add(id));
+		}
+	}
+
+	return visible_components;
+}
+
+/**
+ * Determine which components should be visible based on layout structure and visibility rules
+ * @param layout The layout tree
+ * @param components All component metadata
+ * @param parent_visible Whether the parent component is visible
+ * @param parent_tabs_context Information about parent tabs if any
+ * @returns Set of component IDs that should be visible
+ */
+function determine_visible_components(
+	layout: LayoutNode,
+	components: ComponentMeta[],
+	parent_visible = true,
+	parent_tabs_context?: { selected_tab_id?: string | number }
+): Set<number> {
+	const visible_components: Set<number> = new Set();
+	const component = components.find((c) => c.id === layout.id);
+
+	if (!component) {
+		return visible_components;
+	}
+
+	// Check if the component itself is visible
+	const component_visible =
+		parent_visible &&
+		(typeof component.props.visible === "boolean"
+			? component.props.visible
+			: true);
+
+	// Handle tab_item special case
+	if (component.type === "tabitem") {
+		if (
+			is_tab_item_visible(component, component_visible, parent_tabs_context)
+		) {
+			visible_components.add(component.id);
+
+			// Process children if this tab item is visible
+			const child_visible = process_children_visibility(
+				layout,
+				components,
+				parent_tabs_context
+			);
+			child_visible.forEach((id) => visible_components.add(id));
+		}
+		// If tab item is not visible, none of its children should be loaded
+		return visible_components;
+	}
+
+	// Handle tabs component
+	if (component.type === "tabs") {
+		if (component_visible) {
+			visible_components.add(component.id);
+
+			// Determine which tab should be selected
+			const selected_tab_id = get_selected_tab_id(
+				component,
+				layout,
+				components
+			);
+
+			// Process children with tabs context
+			const child_visible = process_children_visibility(layout, components, {
+				selected_tab_id
+			});
+			child_visible.forEach((id) => visible_components.add(id));
+		}
+		return visible_components;
+	}
+
+	// For regular components
+	if (component_visible) {
+		visible_components.add(component.id);
+
+		// Process children if this component is visible
+		const child_visible = process_children_visibility(
+			layout,
+			components,
+			parent_tabs_context
+		);
+		child_visible.forEach((id) => visible_components.add(id));
+	}
+	// If component is not visible, don't process children
+
+	return visible_components;
+}
+
+/**
+ * Preload only visible components
+ * @param components A list of component metadata
+ * @param layout The layout tree to determine visibility
+ * @param root The root url of the app
+ * @returns A map of component ids to their constructors
+ */
+export function preload_visible_components(
+	components: ComponentMeta[],
+	layout: LayoutNode,
+	root: string
+): Map<ComponentMeta["type"], LoadingComponent> {
+	let constructor_map: Map<ComponentMeta["type"], LoadingComponent> = new Map();
+
+	// Determine which components should be visible
+	const visible_component_ids = determine_visible_components(
+		layout,
+		components
+	);
+
+	// Only preload visible components
+	components.forEach((c) => {
+		if (visible_component_ids.has(c.id)) {
+			const { component, example_components } = get_component(
+				c.type,
+				c.component_class_id,
+				root,
+				components
+			);
+
+			constructor_map.set(c.component_class_id || c.type, component);
+
+			if (example_components) {
+				for (const [name, example_component] of example_components) {
+					constructor_map.set(name, example_component);
+				}
+			}
+		}
+	});
+
+	return constructor_map;
+}
+
+/**
+ * Preload all components (legacy function, kept for backwards compatibility)
  * @param components A list of component metadata
  * @param root The root url of the app
  * @returns A map of component ids to their constructors

package/src/lang/en.json

@@ -89,7 +89,9 @@
 		"sort_ascending": "Sort ascending",
 		"sort_descending": "Sort descending",
 		"drop_to_upload": "Drop CSV or TSV files here to import data into dataframe",
-		"clear_sort": "Clear sort"
+		"clear_sort": "Clear sort",
+		"filter": "Filter",
+		"clear_filter": "Clear filters"
 	},
 	"dropdown": {
 		"dropdown": "Dropdown"

package/src/lang/get_lang_names.js

@@ -0,0 +1,23 @@
+//@ts-nocheck
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const langs = fs.readdirSync(path.join(__dirname, "..", "lang"));
+
+let lang_names = {};
+for (const lang of langs) {
+	if (lang.endsWith(".json")) {
+		const lang_text = fs.readFileSync(
+			path.join(__dirname, "..", "lang", lang),
+			"utf8"
+		);
+		const lang_data = JSON.parse(lang_text.trim());
+		lang_names[lang.split(".")[0]] = lang_data._name;
+	}
+}
+
+console.log(lang_names);

package/src/lang/pt-BR.json

@@ -85,7 +85,9 @@
 		"sort_ascending": "Ordenar em ordem crescente",
 		"sort_descending": "Ordenar em ordem decrescente",
 		"drop_to_upload": "Solte arquivos CSV ou TSV aqui para importar dados para o dataframe",
-		"clear_sort": "Limpar classificação"
+		"clear_sort": "Limpar classificação",
+		"filter": "Filtrar",
+		"clear_filter": "Limpar filtros"
 	},
 	"dropdown": {
 		"dropdown": "Menu suspenso"

package/src/lang/pt.json

@@ -74,7 +74,9 @@
 		"sort_ascending": "Ordenar por ordem crescente",
 		"sort_descending": "Ordenar por ordem decrescente",
 		"drop_to_upload": "Solte ficheiros CSV ou TSV aqui para importar dados para o dataframe",
-		"clear_sort": "Limpar ordenação"
+		"clear_sort": "Limpar ordenação",
+		"filter": "Filtrar",
+		"clear_filter": "Limpar filtros"
 	},
 	"dropdown": {
 		"dropdown": "Lista suspensa"