Fix plot Rendering + visibility bug

.changeset/cyan-humans-smoke.md

@@ -0,0 +1,7 @@
+---
+"@gradio/core": patch
+"@gradio/nativeplot": patch
+"gradio": patch
+---
+
+fix:Fix plot Rendering + visibility bug

demo/invisible_textbox/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: invisible_textbox"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    textbox = gr.Textbox(visible=False, interactive=True, elem_id=\"test-textbox\")\n", "\n", "    make_visible_btn = gr.Button(\"Show\")\n", "    hide = gr.Button(\"Hide\")\n", "    def show():\n", "        return gr.Textbox(visible=True)\n", "    make_visible_btn.click(fn=show, outputs=textbox)\n", "    hide.click(lambda: gr.Textbox(visible=False), outputs=textbox)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: invisible_textbox"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Tabs():\n", "        with gr.Tab(\"Invisible Textbox Demo\"):\n", "            textbox = gr.Textbox(visible=False, interactive=True, elem_id=\"test-textbox\")\n", "\n", "            make_visible_btn = gr.Button(\"Show\")\n", "            hide = gr.Button(\"Hide\")\n", "            def show():\n", "                return gr.Textbox(visible=True)\n", "            make_visible_btn.click(fn=show, outputs=textbox)\n", "            hide.click(lambda: gr.Textbox(visible=False), outputs=textbox)\n", "        with gr.Tab(\"Another Tab\"):\n", "            msg = gr.Markdown(\"This is another tab to demonstrate that invisible components work across tabs.\", visible=False)\n", "            show_message = gr.Button(\"Show Message\")\n", "            show_message.click(lambda: gr.Markdown(visible=True), outputs=msg)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/invisible_textbox/run.py

@@ -1,14 +1,20 @@
 import gradio as gr
 
 with gr.Blocks() as demo:
-    textbox = gr.Textbox(visible=False, interactive=True, elem_id="test-textbox")
+    with gr.Tabs():
+        with gr.Tab("Invisible Textbox Demo"):
+            textbox = gr.Textbox(visible=False, interactive=True, elem_id="test-textbox")
 
-    make_visible_btn = gr.Button("Show")
-    hide = gr.Button("Hide")
-    def show():
-        return gr.Textbox(visible=True)
-    make_visible_btn.click(fn=show, outputs=textbox)
-    hide.click(lambda: gr.Textbox(visible=False), outputs=textbox)
+            make_visible_btn = gr.Button("Show")
+            hide = gr.Button("Hide")
+            def show():
+                return gr.Textbox(visible=True)
+            make_visible_btn.click(fn=show, outputs=textbox)
+            hide.click(lambda: gr.Textbox(visible=False), outputs=textbox)
+        with gr.Tab("Another Tab"):
+            msg = gr.Markdown("This is another tab to demonstrate that invisible components work across tabs.", visible=False)
+            show_message = gr.Button("Show Message")
+            show_message.click(lambda: gr.Markdown(visible=True), outputs=msg)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()

js/core/src/init.svelte.ts

@@ -352,9 +352,9 @@ 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;
 	}
 
@@ -475,7 +475,7 @@ export class AppTree {
 		this.root = this.traverse(this.root!, [
 			(node) => {
 				if (node.id === id) {
-					update_visibility(node, true);
+					update_visibility(node, node.original_visibility);
 				}
 				return node;
 			},
@@ -486,12 +486,12 @@ export class AppTree {
 
 function update_visibility(
 	node: ProcessedComponentMeta,
-	visible: boolean
+	visible: boolean | "hidden"
 ): void {
 	node.props.shared_props.visible = visible;
 	node.children.forEach((child) => {
-		child.props.shared_props.visible = visible;
-		update_visibility(child, visible);
+		child.props.shared_props.visible = child.original_visibility;
+		update_visibility(child, child.original_visibility);
 	});
 }
 
@@ -662,8 +662,7 @@ function untrack_children_of_closed_accordions_or_inactive_tabs(
 		_untrack(node, components_to_register);
 		if (node.children) {
 			node.children.forEach((child) => {
-				if (child.props.shared_props.visible === true)
-					update_visibility(child, false);
+				update_visibility(child, false);
 			});
 		}
 	}
@@ -677,9 +676,7 @@ function untrack_children_of_closed_accordions_or_inactive_tabs(
 				_untrack(child, components_to_register);
 				if (child.children) {
 					child.children.forEach((grandchild) => {
-						if (grandchild.props.shared_props.visible === true) {
-							update_visibility(grandchild, false);
-						}
+						update_visibility(grandchild, false);
 					});
 				}
 			}

js/core/src/types.ts

@@ -25,6 +25,7 @@ export interface ProcessedComponentMeta {
 	type: string;
 	id: number;
 	props: { shared_props: SharedProps; props: Record<string, unknown> };
+	original_visibility: boolean | "hidden";
 	component: Component | LoadingComponent | null;
 	documentation?: Documentation;
 	children: ProcessedComponentMeta[];

js/nativeplot/Index.svelte

@@ -643,7 +643,9 @@
 									legend: {
 										orient: "bottom",
 										title: gradio.props.color_title,
-										values: [...gradio.props.colors_in_legend] || undefined
+										values: gradio.props.colors_in_legend?.length
+											? [...gradio.props.colors_in_legend]
+											: undefined
 									},
 									scale:
 										gradio.props.value!.datatypes[gradio.props.color] ===
@@ -766,6 +768,7 @@
 		} as Spec;
 	}
 	/* eslint-enable complexity */
+	$inspect("visible", gradio.shared.visible);
 </script>
 
 <Block

js/spa/test/invisible_textbox.spec.ts

@@ -20,3 +20,17 @@ test("Textbox visibility can be toggled from the backend. Toggling visibility re
 	await page.click('text="Show"');
 	await expect(textbox).toHaveValue("Test value");
 });
+
+test("Component visibility is respected in inactive tabs. A component with visibility=False will not be shown when the tab is active", async ({
+	page
+}) => {
+	await page.getByRole("tab", { name: "Another Tab" }).click();
+
+	await page.click('text="Show Message"');
+
+	await expect(
+		page.getByText(
+			"This is another tab to demonstrate that invisible components work across tabs."
+		)
+	).toBeVisible();
+});

js/spa/test/test_chatinterface_streaming_echo.spec.ts

@@ -1,5 +1,7 @@
 import { test, expect, go_to_testcase } from "@self/tootils";
 
+test.describe.configure({ mode: "serial" });
+
 const cases = [
 	"messages",
 	"multimodal_messages",