Ensures tabs with visible set to false are not visible.

.changeset/open-geckos-flash.md

@@ -0,0 +1,11 @@
+---
+"@gradio/core": patch
+"@gradio/sanitize": patch
+"@gradio/tabitem": patch
+"@gradio/tabs": patch
+"@self/app": patch
+"gradio": patch
+"website": patch
+---
+
+fix:Ensures tabs with visible set to false are not visible.

demo/tabs_visibility/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: tabs_visibility"]}, {"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.Tab(\"abc\"):\n", "        gr.Textbox(label=\"abc\")\n", "    with gr.Tab(\"def\", visible=False) as t:\n", "        gr.Textbox(label=\"def\")\n", "    with gr.Tab(\"ghi\"):\n", "        gr.Textbox(label=\"ghi\")\n", "    with gr.Tab(\"jkl\", visible=False) as t2:\n", "        gr.Textbox(label=\"jkl\")\n", "    with gr.Tab(\"mno\"):\n", "        gr.Textbox(label=\"mno\")\n", "    with gr.Tab(\"pqr\", visible=False) as t3:\n", "        gr.Textbox(label=\"pqr\")\n", "    with gr.Tab(\"stu\"):\n", "        gr.Textbox(label=\"stu\")\n", "    with gr.Tab(\"vwx\", visible=False) as t4:\n", "        gr.Textbox(label=\"vwx\")\n", "    with gr.Tab(\"yz\"):\n", "        gr.Textbox(label=\"yz\")\n", "    b = gr.Button(\"Make visible\")\n", "\n", "    b.click(\n", "        lambda: [\n", "            gr.Tab(visible=True),\n", "            gr.Tab(visible=True),\n", "            gr.Tab(visible=True),\n", "            gr.Tab(visible=True),\n", "        ],\n", "        inputs=None,\n", "        outputs=[t, t2, t3, t4],\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/tabs_visibility/run.py

@@ -0,0 +1,36 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    with gr.Tab("abc"):
+        gr.Textbox(label="abc")
+    with gr.Tab("def", visible=False) as t:
+        gr.Textbox(label="def")
+    with gr.Tab("ghi"):
+        gr.Textbox(label="ghi")
+    with gr.Tab("jkl", visible=False) as t2:
+        gr.Textbox(label="jkl")
+    with gr.Tab("mno"):
+        gr.Textbox(label="mno")
+    with gr.Tab("pqr", visible=False) as t3:
+        gr.Textbox(label="pqr")
+    with gr.Tab("stu"):
+        gr.Textbox(label="stu")
+    with gr.Tab("vwx", visible=False) as t4:
+        gr.Textbox(label="vwx")
+    with gr.Tab("yz"):
+        gr.Textbox(label="yz")
+    b = gr.Button("Make visible")
+
+    b.click(
+        lambda: [
+            gr.Tab(visible=True),
+            gr.Tab(visible=True),
+            gr.Tab(visible=True),
+            gr.Tab(visible=True),
+        ],
+        inputs=None,
+        outputs=[t, t2, t3, t4],
+    )
+
+if __name__ == "__main__":
+    demo.launch()

js/_website/src/lib/components/DemosLite.svelte

@@ -540,7 +540,7 @@
 						class="mt-1 flex-1 flex flex-col relative overflow-scroll code-scroll"
 					>
 						<Tabs
-							inital_tabs={TABS}
+							initial_tabs={TABS}
 							selected={selected_tab}
 							elem_classes={["editor-tabs"]}
 						>

js/app/src/routes/[...catchall]/+page.ts

@@ -31,7 +31,7 @@ export async function load({
 		throw new Error("No config found");
 	}
 
-	const { create_layout, layout } = create_components();
+	const { create_layout, layout } = create_components(undefined);
 
 	await create_layout({
 		app,

js/core/src/init.ts

@@ -1,4 +1,5 @@
 import { writable, type Writable, get } from "svelte/store";
+
 import type {
 	ComponentMeta,
 	Dependency,
@@ -27,6 +28,7 @@ const raf = is_browser
  * Create a store with the layout and a map of targets
  * @returns A store with the layout and a map of targets
  */
+let has_run = new Set<number>();
 export function create_components(initial_layout: ComponentMeta | undefined): {
 	layout: Writable<ComponentMeta>;
 	targets: Writable<TargetMap>;
@@ -290,19 +292,24 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 			);
 		}
 
-		if (instance.type === "tabs") {
-			instance.children =
-				instance?.children?.map((c) => ({
-					...c,
-					props: {
-						...c.props,
-						id: c.props.id || c.id
-					}
-				})) || [];
-			const child_tab_items = instance.children?.filter(
+		if (instance.type === "tabs" && !instance.props.initial_tabs) {
+			const tab_items_props =
+				node.children?.map((c) => {
+					const instance = instance_map[c.id];
+					instance.props.id = c.id;
+					return {
+						type: instance.type,
+						props: {
+							...(instance.props as any),
+							id: instance.props.id || c.id
+						}
+					};
+				}) || [];
+			const child_tab_items = tab_items_props.filter(
 				(child) => child.type === "tabitem"
 			);
-			instance.props.inital_tabs = child_tab_items?.map((child) => ({
+
+			instance.props.initial_tabs = child_tab_items?.map((child) => ({
 				label: child.props.label,
 				id: child.props.id,
 				visible: child.props.visible,
@@ -337,7 +344,7 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 					else if (update.value instanceof Set)
 						new_value = new Set(update.value);
 					else if (Array.isArray(update.value)) new_value = [...update.value];
-					else if (update.value === null) new_value = null;
+					else if (update.value == null) new_value = null;
 					else if (typeof update.value === "object")
 						new_value = { ...update.value };
 					else new_value = update.value;

js/sanitize/package.json

@@ -30,7 +30,8 @@
 				"development": "./server.ts",
 				"default": "./dist/server.js"
 			}
-		}
+		},
+		"./package.json": "./package.json"
 	},
 	"scripts": {
 		"package": "svelte-package --input=. --cwd=../../.config/"

js/tabitem/Index.svelte

@@ -10,21 +10,23 @@
 	export let elem_classes: string[] = [];
 	export let label: string;
 	export let id: string | number;
-	export let gradio: Gradio<{
-		select: SelectData;
-	}>;
+	export let gradio:
+		| Gradio<{
+				select: SelectData;
+		  }>
+		| undefined;
 	export let visible = true;
 	export let interactive = true;
 </script>
 
 <TabItem
 	{elem_id}
 	{elem_classes}
-	name={label}
+	{label}
 	{visible}
 	{interactive}
 	{id}
-	on:select={({ detail }) => gradio.dispatch("select", detail)}
+	on:select={({ detail }) => gradio?.dispatch("select", detail)}
 >
 	<slot />
 </TabItem>

js/tabitem/shared/TabItem.svelte

@@ -6,7 +6,7 @@
 
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
-	export let name: string;
+	export let label: string;
 	export let id: string | number | object = {};
 	export let visible: boolean;
 	export let interactive: boolean;
@@ -18,14 +18,14 @@
 
 	let tab_index: number;
 
-	$: tab_index = register_tab({ name, id, elem_id, visible, interactive });
+	$: tab_index = register_tab({ label, id, elem_id, visible, interactive });
 
 	onMount(() => {
-		return (): void => unregister_tab({ name, id, elem_id });
+		return (): void => unregister_tab({ label, id, elem_id });
 	});
 
 	$: $selected_tab_index === tab_index &&
-		tick().then(() => dispatch("select", { value: name, index: tab_index }));
+		tick().then(() => dispatch("select", { value: label, index: tab_index }));
 </script>
 
 <div

js/tabs/Index.svelte

@@ -13,11 +13,13 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let selected: number | string;
-	export let inital_tabs: Tab[] = [];
-	export let gradio: Gradio<{
-		change: never;
-		select: SelectData;
-	}>;
+	export let initial_tabs: Tab[] = [];
+	export let gradio:
+		| Gradio<{
+				change: never;
+				select: SelectData;
+		  }>
+		| undefined;
 
 	$: dispatch("prop_change", { selected });
 </script>
@@ -27,9 +29,9 @@
 	{elem_id}
 	{elem_classes}
 	bind:selected
-	on:change={() => gradio.dispatch("change")}
-	on:select={(e) => gradio.dispatch("select", e.detail)}
-	{inital_tabs}
+	on:change={() => gradio?.dispatch("change")}
+	on:select={(e) => gradio?.dispatch("select", e.detail)}
+	{initial_tabs}
 >
 	<slot />
 </Tabs>

js/tabs/Tabs.stories.svelte

@@ -0,0 +1,48 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Tabs from "./Index.svelte";
+	import TabItem from "../tabitem/Index.svelte";
+</script>
+
+<Meta title="Components/Tabs" component={Tabs} />
+
+<Template let:args>
+	<Tabs {...args}>
+		<TabItem
+			id="tab-1"
+			label="Image Tab"
+			gradio={undefined}
+			visible
+			interactive
+			elem_classes={["editor-tabitem"]}
+		>
+			<img
+				style="width: 200px;"
+				alt="Cheetah"
+				src="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
+			/>
+		</TabItem>
+		<TabItem
+			id="tab-2"
+			label="Hidden Tab"
+			gradio={undefined}
+			visible={false}
+			interactive
+			elem_classes={["editor-tabitem"]}
+		>
+			Secret Tab
+		</TabItem>
+		<TabItem
+			id="tab-3"
+			label="Visible Tab"
+			gradio={undefined}
+			visible
+			interactive
+			elem_classes={["editor-tabitem"]}
+		>
+			Visible Tab
+		</TabItem>
+	</Tabs>
+</Template>
+
+<Story name="Tabs" args={{}} />