Fix plot Rendering + visibility bug (#12515)

* Fix plot Rendering + visibility bug

* add changeset

* add changeset

* Fix

* Fix

* Fix failing test

---------

Co-authored-by: gradio-pr-bot <[email protected]>

Author: freddyaboulton

.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", "        with gr.Tab(\"Third Tab\"):\n", "            with gr.Accordion(\"Third Tab Accordion\", open=True, visible=False) as acc:\n", "                third_msg = gr.Textbox(label=\"Visible Textbox\", interactive=True, visible=True)\n", "                hidden_number = gr.Number(visible=False, label=\"Hidden Number\", value=100, elem_id=\"hidden-number\")\n", "                show_number_btn = gr.Button(\"Show Number\")\n", "                hide_number_btn = gr.Button(\"Hide Number\")\n", "                show_number_btn.click(lambda: gr.Number(visible=True), outputs=hidden_number)\n", "                hide_number_btn.click(lambda: gr.Number(visible=False), outputs=hidden_number)\n", "\n", "            show_third_message = gr.Button(\"Show Accordion\")\n", "            show_third_message.click(lambda: gr.Accordion(visible=True), outputs=acc)\n", "            hide_third_message = gr.Button(\"Hide Accordion\")\n", "            hide_third_message.click(lambda: gr.Accordion(visible=False), outputs=acc)\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/invisible_textbox/run.py

@@ -1,14 +1,32 @@
 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)
+        with gr.Tab("Third Tab"):
+            with gr.Accordion("Third Tab Accordion", open=True, visible=False) as acc:
+                third_msg = gr.Textbox(label="Visible Textbox", interactive=True, visible=True)
+                hidden_number = gr.Number(visible=False, label="Hidden Number", value=100, elem_id="hidden-number")
+                show_number_btn = gr.Button("Show Number")
+                hide_number_btn = gr.Button("Hide Number")
+                show_number_btn.click(lambda: gr.Number(visible=True), outputs=hidden_number)
+                hide_number_btn.click(lambda: gr.Number(visible=False), outputs=hidden_number)
 
+            show_third_message = gr.Button("Show Accordion")
+            show_third_message.click(lambda: gr.Accordion(visible=True), outputs=acc)
+            hide_third_message = gr.Button("Hide Accordion")
+            hide_third_message.click(lambda: gr.Accordion(visible=False), outputs=acc)
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()

js/core/src/init.svelte.ts

@@ -76,6 +76,7 @@ export class AppTree {
 	ready: Promise<void>;
 	ready_resolve!: () => void;
 	resolved: boolean = false;
+	#hidden_on_startup: Set<number> = new Set();
 
 	constructor(
 		components: ComponentMeta[],
@@ -228,7 +229,8 @@ export class AppTree {
 			(node) =>
 				untrack_children_of_closed_accordions_or_inactive_tabs(
 					node,
-					this.components_to_register
+					this.components_to_register,
+					this.#hidden_on_startup
 				)
 		]);
 	}
@@ -352,9 +354,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 +477,7 @@ export class AppTree {
 		this.root = this.traverse(this.root!, [
 			(node) => {
 				if (node.id === id) {
-					update_visibility(node, true);
+					make_visible_if_not_rendered(node, this.#hidden_on_startup);
 				}
 				return node;
 			},
@@ -484,14 +486,15 @@ export class AppTree {
 	}
 }
 
-function update_visibility(
+function make_visible_if_not_rendered(
 	node: ProcessedComponentMeta,
-	visible: boolean
+	hidden_on_startup: Set<number>
 ): void {
-	node.props.shared_props.visible = visible;
+	node.props.shared_props.visible = hidden_on_startup.has(node.id)
+		? true
+		: node.props.shared_props.visible;
 	node.children.forEach((child) => {
-		child.props.shared_props.visible = visible;
-		update_visibility(child, visible);
+		make_visible_if_not_rendered(child, hidden_on_startup);
 	});
 }
 
@@ -626,7 +629,6 @@ function set_visibility_for_updated_node(
 ): ProcessedComponentMeta {
 	if (node.id == id) {
 		node.props.shared_props.visible = visible;
-		update_visibility(node, visible);
 	}
 	return node;
 }
@@ -653,17 +655,31 @@ 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>
+	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) => {
-				if (child.props.shared_props.visible === true)
-					update_visibility(child, false);
+				mark_component_invisible_if_visible(child, hidden_on_startup);
 			});
 		}
 	}
@@ -675,13 +691,7 @@ function untrack_children_of_closed_accordions_or_inactive_tabs(
 					(node.props.props.selected || node.props.props.initial_tabs[0].id)
 			) {
 				_untrack(child, components_to_register);
-				if (child.children) {
-					child.children.forEach((grandchild) => {
-						if (grandchild.props.shared_props.visible === true) {
-							update_visibility(grandchild, false);
-						}
-					});
-				}
+				mark_component_invisible_if_visible(child, hidden_on_startup);
 			}
 		});
 	}

js/core/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 */

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,44 @@ 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.click('text="Show"');
+
+	await expect(page.locator("#test-textbox")).toHaveCount(1);
+
+	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();
+
+	// Switch back to first tab and check textbox is still there
+	await page.getByRole("tab", { name: "Invisible Textbox Demo" }).click();
+
+	await expect(page.locator("#test-textbox")).toHaveCount(1);
+});
+
+test("Making accordion visible does not show all children automatically", async ({
+	page
+}) => {
+	await page.getByRole("tab", { name: "Third Tab" }).click();
+	await expect(page.locator("#hidden-number")).toHaveCount(0);
+
+	await page.click('text="Show Accordion"');
+
+	await expect(page.getByLabel("Visible Textbox")).toBeVisible();
+
+	await page.click('text="Show Number"');
+
+	await expect(page.locator("#hidden-number")).toHaveCount(1);
+
+	await page.click('text="Hide Number"');
+	await expect(page.locator("#hidden-number")).toHaveCount(0);
+});

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",