@gradio/core 1.0.1 → 1.1.0

package/dist/src/init.svelte.js

@@ -1,6 +1,8 @@
 import { determine_interactivity, get_component, get_inputs_outputs } from "./init_utils";
 import { translate_if_needed } from "./i18n";
 import { tick } from "svelte";
+import { dequal } from "dequal";
+import {} from "@gradio/utils";
 import { allowed_shared_props } from "@gradio/utils";
 import { Client } from "@gradio/client";
 const type_map = {
@@ -21,6 +23,7 @@ export class AppTree {
     client;
     /** the root node of the processed layout tree */
     root = $state();
+    root_untracked;
     /** a set of all component IDs that are inputs to dependencies */
     #input_ids = new Set();
     /** a set of all component IDs that are outputs of dependencies */
@@ -29,13 +32,15 @@ export class AppTree {
     #pending_components = [];
     #get_callbacks = new Map();
     #set_callbacks = new Map();
+    #event_dispatcher;
     component_ids;
     initial_tabs = {};
     components_to_register = new Set();
     ready;
     ready_resolve;
     resolved = false;
-    constructor(components, layout, dependencies, config, app, reactive_formatter) {
+    #hidden_on_startup = new Set();
+    constructor(components, layout, dependencies, config, app, reactive_formatter, event_dispatcher) {
         this.ready = new Promise((resolve) => {
             this.ready_resolve = resolve;
         });
@@ -66,6 +71,8 @@ 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, layout, dependencies, config) {
         this.#layout_payload = layout;
@@ -126,7 +133,8 @@ export class AppTree {
             (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) => this.find_attached_events(node, this.#dependency_payload),
+            (node) => untrack_children_of_closed_accordions_or_inactive_tabs(node, this.components_to_register, this.#hidden_on_startup)
         ]);
     }
     find_attached_events(node, dependencies) {
@@ -211,7 +219,8 @@ export class AppTree {
                 : null,
             key: component.key,
             rendered_in: component.rendered_in,
-            documentation: component.documentation
+            documentation: component.documentation,
+            original_visibility: processed_props.shared_props.visible
         };
         return node;
     }
@@ -230,6 +239,15 @@ export class AppTree {
         }
         n.children = subtree.children;
     }
+    async update_visibility(node, new_state) {
+        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
@@ -248,20 +266,44 @@ export class AppTree {
             this.root = this.traverse(this.root, [
                 //@ts-ignore
                 (n) => set_visibility_for_updated_node(n, id, new_state.visible),
+                //@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.api_url));
+        // 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);
     }
     /**
      * Gets the current state of a component by its ID
@@ -270,15 +312,34 @@ export class AppTree {
      */
     async get_state(id) {
         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 });
+            return Promise.resolve({ value: component.props.props.value });
         return null;
     }
+    async render_previously_invisible_children(id) {
+        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, hidden_on_startup) {
+    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);
+    });
 }
 /**
  * Process the server function names and return a dictionary of functions
@@ -302,15 +363,7 @@ export function process_server_fn(id, server_fns, app) {
         return acc;
     }, {});
 }
-/**
- * Gathers the props for a component
- * @param id the ID of the component
- * @param props the props of the component
- * @param dependencies the component's dependencies
- * @param additional any additional props to include
- * @returns the gathered props as an object with `shared_props` and `props` keys
- */
-function gather_props(id, props, dependencies, client, api_url, additional = {}) {
+function create_props_shared_props(props) {
     const _shared_props = {};
     const _props = {};
     for (const key in props) {
@@ -322,14 +375,24 @@ function gather_props(id, props, dependencies, client, api_url, additional = {})
         else if (allowed_shared_props.includes(key)) {
             const _key = key;
             _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];
         }
     }
+    return { shared_props: _shared_props, props: _props };
+}
+/**
+ * Gathers the props for a component
+ * @param id the ID of the component
+ * @param props the props of the component
+ * @param dependencies the component's dependencies
+ * @param additional any additional props to include
+ * @returns the gathered props as an object with `shared_props` and `props` keys
+ */
+function gather_props(id, props, dependencies, client, api_url, additional = {}) {
+    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)) {
             const _key = key;
@@ -385,6 +448,38 @@ function untrack_children_of_invisible_parents(node, components_to_register) {
     }
     return node;
 }
+function mark_component_invisible_if_visible(node, hidden_on_startup) {
+    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, components_to_register, hidden_on_startup) {
+    // 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, components_to_register) {
     // Check if the node is visible
     if (node.type === "form") {
@@ -397,6 +492,27 @@ function handle_empty_forms(node, components_to_register) {
     }
     return node;
 }
+function update_parent_visibility(node, child_made_visible, visibility_state) {
+    // 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) {
     const supported_props = [
         "description",
@@ -424,6 +540,9 @@ function apply_initial_tabs(node, 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;
 }
 function _gather_initial_tabs(node, initial_tabs, parent_tab_id, order) {
@@ -440,7 +559,8 @@ function _gather_initial_tabs(node, initial_tabs, parent_tab_id, order) {
             elem_id: node.props.shared_props.elem_id,
             visible: node.props.shared_props.visible,
             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;
     }
@@ -473,3 +593,17 @@ function find_node_by_id(tree, id) {
     }
     return null;
 }
+function find_parent(tree, id) {
+    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/dist/src/types.d.ts

@@ -28,6 +28,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 */
 export interface DependencyTypes {

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "devDependencies": {
-    "@gradio/annotatedimage": "^0.10.1",
-    "@gradio/atoms": "^0.19.0",
-    "@gradio/box": "^0.2.26",
-    "@gradio/browserstate": "^0.3.3",
-    "@gradio/button": "^0.5.14",
-    "@gradio/checkbox": "^0.5.0",
-    "@gradio/chatbot": "^0.28.0",
-    "@gradio/client": "^2.0.0",
-    "@gradio/audio": "^0.20.0",
-    "@gradio/checkboxgroup": "^0.8.0",
-    "@gradio/accordion": "^0.5.25",
-    "@gradio/colorpicker": "^0.5.0",
-    "@gradio/code": "^0.16.0",
-    "@gradio/dataframe": "^0.21.0",
+    "@gradio/annotatedimage": "^0.11.0",
+    "@gradio/atoms": "^0.20.0",
+    "@gradio/browserstate": "^0.3.4",
+    "@gradio/accordion": "^0.5.27",
+    "@gradio/box": "^0.2.27",
+    "@gradio/audio": "^0.22.0",
+    "@gradio/button": "^0.6.1",
+    "@gradio/chatbot": "^0.29.0",
+    "@gradio/checkbox": "^0.6.0",
+    "@gradio/checkboxgroup": "^0.9.0",
+    "@gradio/client": "^2.0.1",
+    "@gradio/code": "^0.17.0",
+    "@gradio/colorpicker": "^0.5.2",
     "@gradio/column": "^0.3.0",
-    "@gradio/dataset": "^0.5.0",
-    "@gradio/datetime": "^0.3.23",
-    "@gradio/downloadbutton": "^0.4.13",
-    "@gradio/dropdown": "^0.10.6",
-    "@gradio/fallback": "^0.4.30",
-    "@gradio/file": "^0.13.1",
-    "@gradio/form": "^0.2.27",
-    "@gradio/fileexplorer": "^0.5.42",
-    "@gradio/gallery": "^0.15.35",
-    "@gradio/group": "^0.3.0",
-    "@gradio/highlightedtext": "^0.9.14",
-    "@gradio/html": "^0.8.0",
-    "@gradio/image": "^0.24.0",
-    "@gradio/imageeditor": "^0.18.2",
+    "@gradio/dataframe": "^0.21.2",
+    "@gradio/dataset": "^0.5.1",
+    "@gradio/datetime": "^0.4.0",
+    "@gradio/downloadbutton": "^0.4.15",
+    "@gradio/fallback": "^0.4.31",
+    "@gradio/dropdown": "^0.11.0",
+    "@gradio/file": "^0.14.0",
+    "@gradio/gallery": "^0.16.0",
+    "@gradio/fileexplorer": "^0.6.0",
+    "@gradio/form": "^0.2.28",
+    "@gradio/highlightedtext": "^0.10.0",
+    "@gradio/group": "^0.3.1",
     "@gradio/icons": "^0.15.0",
-    "@gradio/imageslider": "^0.3.1",
-    "@gradio/json": "^0.5.32",
-    "@gradio/markdown": "^0.13.23",
-    "@gradio/label": "^0.5.22",
-    "@gradio/model3d": "^0.15.1",
-    "@gradio/multimodaltextbox": "^0.11.0",
-    "@gradio/nativeplot": "^0.9.0",
-    "@gradio/number": "^0.7.2",
-    "@gradio/paramviewer": "^0.9.0",
-    "@gradio/plot": "^0.9.25",
-    "@gradio/radio": "^0.8.0",
+    "@gradio/image": "^0.25.0",
+    "@gradio/imageeditor": "^0.18.3",
+    "@gradio/html": "^0.9.0",
+    "@gradio/imageslider": "^0.4.0",
+    "@gradio/json": "^0.6.0",
+    "@gradio/label": "^0.6.0",
+    "@gradio/markdown": "^0.13.24",
+    "@gradio/model3d": "^0.16.0",
+    "@gradio/multimodaltextbox": "^0.11.2",
+    "@gradio/nativeplot": "^0.9.2",
+    "@gradio/paramviewer": "^0.9.1",
+    "@gradio/plot": "^0.10.0",
+    "@gradio/number": "^0.8.0",
+    "@gradio/radio": "^0.9.0",
+    "@gradio/sidebar": "^0.1.25",
     "@gradio/row": "^0.3.0",
-    "@gradio/sidebar": "^0.1.24",
-    "@gradio/simpledropdown": "^0.3.30",
-    "@gradio/simpletextbox": "^0.3.31",
-    "@gradio/slider": "^0.7.0",
-    "@gradio/simpleimage": "^0.9.1",
-    "@gradio/state": "^0.2.0",
-    "@gradio/tabitem": "^0.6.2",
-    "@gradio/tabs": "^0.5.2",
-    "@gradio/textbox": "^0.12.0",
-    "@gradio/statustracker": "^0.12.0",
+    "@gradio/simpledropdown": "^0.3.31",
+    "@gradio/simpleimage": "^0.9.2",
+    "@gradio/slider": "^0.7.2",
+    "@gradio/simpletextbox": "^0.3.32",
+    "@gradio/state": "^0.2.1",
+    "@gradio/statustracker": "^0.12.1",
+    "@gradio/tabs": "^0.5.4",
+    "@gradio/tabitem": "^0.6.4",
     "@gradio/theme": "^0.5.0",
-    "@gradio/timer": "^0.4.6",
-    "@gradio/upload": "^0.17.2",
-    "@gradio/utils": "^0.10.4",
-    "@gradio/uploadbutton": "^0.9.13",
-    "@gradio/video": "^0.17.0",
-    "@gradio/vibeeditor": "^0.3.1"
+    "@gradio/timer": "^0.4.7",
+    "@gradio/textbox": "^0.13.0",
+    "@gradio/upload": "^0.17.3",
+    "@gradio/utils": "^0.11.0",
+    "@gradio/uploadbutton": "^0.9.15",
+    "@gradio/vibeeditor": "^0.3.2",
+    "@gradio/video": "^0.19.0"
   },
   "msw": {
     "workerDirectory": "public"