@gradio/core 0.19.3 → 0.21.0

package/dist/src/init.js

@@ -26,6 +26,9 @@ export function create_components(initial_layout) {
     let app;
     let keys_per_render_id = {};
     let _rootNode;
+    // Store current layout and root for dynamic visibility recalculation
+    let current_layout;
+    let current_root;
     function set_event_specific_args(dependencies) {
         dependencies.forEach((dep) => {
             dep.targets.forEach((target) => {
@@ -42,6 +45,14 @@ export function create_components(initial_layout) {
         // make sure the state is settled before proceeding
         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();
@@ -49,6 +60,9 @@ export function create_components(initial_layout) {
         constructor_map = new Map();
         _component_map = new Map();
         instance_map = {};
+        // Store current layout and root for dynamic visibility recalculation
+        current_layout = layout;
+        current_root = root;
         _rootNode = {
             id: layout.id,
             type: "column",
@@ -67,7 +81,7 @@ export function create_components(initial_layout) {
             get_inputs_outputs(dep, inputs, outputs);
         });
         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) => {
             acc[c.id] = c;
             return acc;
@@ -80,6 +94,9 @@ export function create_components(initial_layout) {
      * Rerender the layout when the config has been modified to attach new components
      */
     function rerender_layout({ render_id, components, layout, root, dependencies }) {
+        // 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) {
@@ -97,7 +114,7 @@ export function create_components(initial_layout) {
                 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);
         });
@@ -159,9 +176,19 @@ export function create_components(initial_layout) {
     async function walk_layout(node, root, components, parent) {
         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, instance.component_class_id, root, components, instance.props.components).example_components;
         }
@@ -191,7 +218,7 @@ export function create_components(initial_layout) {
             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
             }));
@@ -206,7 +233,63 @@ export function create_components(initial_layout) {
     }
     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) {
+        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) {
+        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() {
+        const had_visibility_changes = has_visibility_changes(pending_updates);
+        let previous_visible_ids;
+        // 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++) {
@@ -234,6 +317,25 @@ export function create_components(initial_layout) {
             }
             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();
+                // 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);
@@ -467,7 +569,141 @@ export function get_component(type, class_id, root, components, example_componen
     };
 }
 /**
- * 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, component_visible, parent_tabs_context) {
+    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, layout, components) {
+    // 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);
+            }
+        }
+    }
+    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, components, parent_tabs_context) {
+    const visible_components = 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, components, parent_visible = true, parent_tabs_context) {
+    const visible_components = 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, layout, root) {
+    let constructor_map = 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/dist/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/dist/src/lang/get_lang_names.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/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/dist/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/dist/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"

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "0.19.3",
+  "version": "0.21.0",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.17",
-    "@gradio/annotatedimage": "^0.9.22",
-    "@gradio/atoms": "^0.16.2",
-    "@gradio/audio": "^0.17.18",
-    "@gradio/chatbot": "^0.26.15",
-    "@gradio/box": "^0.2.20",
-    "@gradio/button": "^0.5.4",
-    "@gradio/checkbox": "^0.4.24",
-    "@gradio/checkboxgroup": "^0.6.23",
-    "@gradio/client": "^1.15.3",
-    "@gradio/code": "^0.14.8",
-    "@gradio/colorpicker": "^0.4.23",
-    "@gradio/column": "^0.2.0",
-    "@gradio/dataset": "^0.4.24",
-    "@gradio/dataframe": "^0.17.17",
-    "@gradio/datetime": "^0.3.16",
-    "@gradio/downloadbutton": "^0.4.4",
-    "@gradio/dropdown": "^0.9.23",
-    "@gradio/fallback": "^0.4.23",
-    "@gradio/file": "^0.12.21",
-    "@gradio/form": "^0.2.20",
-    "@gradio/fileexplorer": "^0.5.32",
+    "@gradio/accordion": "^0.5.19",
+    "@gradio/atoms": "^0.16.3",
+    "@gradio/audio": "^0.17.20",
+    "@gradio/box": "^0.2.21",
+    "@gradio/annotatedimage": "^0.9.24",
+    "@gradio/button": "^0.5.6",
+    "@gradio/chatbot": "^0.26.17",
+    "@gradio/checkbox": "^0.4.25",
+    "@gradio/checkboxgroup": "^0.6.24",
+    "@gradio/client": "^1.15.5",
+    "@gradio/colorpicker": "^0.4.24",
+    "@gradio/code": "^0.14.10",
+    "@gradio/column": "^0.2.1",
+    "@gradio/dataframe": "^0.18.1",
+    "@gradio/dataset": "^0.4.26",
+    "@gradio/datetime": "^0.3.17",
+    "@gradio/downloadbutton": "^0.4.6",
+    "@gradio/dropdown": "^0.9.24",
+    "@gradio/fallback": "^0.4.24",
+    "@gradio/file": "^0.12.23",
+    "@gradio/fileexplorer": "^0.5.34",
+    "@gradio/gallery": "^0.15.26",
+    "@gradio/form": "^0.2.21",
     "@gradio/group": "^0.2.0",
-    "@gradio/gallery": "^0.15.24",
-    "@gradio/highlightedtext": "^0.9.6",
-    "@gradio/html": "^0.6.15",
     "@gradio/icons": "^0.12.0",
-    "@gradio/image": "^0.22.10",
-    "@gradio/imageeditor": "^0.15.4",
-    "@gradio/imageslider": "^0.2.6",
-    "@gradio/json": "^0.5.25",
-    "@gradio/label": "^0.5.15",
+    "@gradio/highlightedtext": "^0.9.7",
+    "@gradio/html": "^0.6.16",
+    "@gradio/image": "^0.22.12",
+    "@gradio/imageeditor": "^0.16.0",
+    "@gradio/imageslider": "^0.2.8",
+    "@gradio/label": "^0.5.16",
+    "@gradio/json": "^0.5.26",
+    "@gradio/markdown": "^0.13.17",
+    "@gradio/model3d": "^0.14.19",
     "@gradio/browserstate": "^0.3.2",
-    "@gradio/markdown": "^0.13.16",
-    "@gradio/model3d": "^0.14.17",
-    "@gradio/multimodaltextbox": "^0.10.10",
-    "@gradio/nativeplot": "^0.6.2",
-    "@gradio/number": "^0.5.23",
-    "@gradio/plot": "^0.9.18",
-    "@gradio/radio": "^0.7.6",
-    "@gradio/paramviewer": "^0.7.11",
-    "@gradio/sidebar": "^0.1.15",
-    "@gradio/simpledropdown": "^0.3.23",
+    "@gradio/multimodaltextbox": "^0.10.12",
+    "@gradio/nativeplot": "^0.7.1",
+    "@gradio/number": "^0.6.1",
+    "@gradio/paramviewer": "^0.7.12",
+    "@gradio/plot": "^0.9.19",
     "@gradio/row": "^0.2.1",
-    "@gradio/simpleimage": "^0.8.32",
-    "@gradio/sketchbox": "^0.6.10",
-    "@gradio/simpletextbox": "^0.3.24",
+    "@gradio/radio": "^0.7.7",
+    "@gradio/sidebar": "^0.1.17",
+    "@gradio/simpleimage": "^0.8.34",
+    "@gradio/simpledropdown": "^0.3.24",
+    "@gradio/simpletextbox": "^0.3.25",
+    "@gradio/sketchbox": "^0.6.12",
+    "@gradio/slider": "^0.6.13",
+    "@gradio/tabitem": "^0.5.0",
     "@gradio/state": "^0.1.2",
-    "@gradio/slider": "^0.6.12",
-    "@gradio/tabitem": "^0.4.5",
+    "@gradio/textbox": "^0.10.16",
     "@gradio/tabs": "^0.4.5",
-    "@gradio/textbox": "^0.10.15",
     "@gradio/theme": "^0.4.0",
     "@gradio/timer": "^0.4.5",
-    "@gradio/statustracker": "^0.10.13",
-    "@gradio/uploadbutton": "^0.9.4",
+    "@gradio/upload": "^0.16.10",
+    "@gradio/uploadbutton": "^0.9.6",
+    "@gradio/statustracker": "^0.10.14",
     "@gradio/utils": "^0.10.2",
-    "@gradio/upload": "^0.16.8",
-    "@gradio/video": "^0.14.18",
+    "@gradio/video": "^0.14.20",
     "@gradio/wasm": "^0.18.1"
   },
   "msw": {