From 52298db987b760c719a42f3ff7144b13af6a925c Mon Sep 17 00:00:00 2001 From: aliabid94 Date: Mon, 8 Apr 2024 11:34:25 -0700 Subject: [PATCH] Fix programmatic tab selection (#7916) * changes * changes * add changeset * changes * add changeset * changes * add changeset --------- Co-authored-by: Ali Abid Co-authored-by: gradio-pr-bot Co-authored-by: pngwn Co-authored-by: Abubakar Abid --- .changeset/many-snakes-glow.md | 6 ++++++ demo/tabs/run.ipynb | 2 +- demo/tabs/run.py | 8 ++++++-- js/app/src/Render.svelte | 2 +- js/app/src/RenderComponent.svelte | 4 ++-- js/app/test/tabs.spec.ts | 12 ++++++++++++ 6 files changed, 28 insertions(+), 6 deletions(-) create mode 100644 .changeset/many-snakes-glow.md diff --git a/.changeset/many-snakes-glow.md b/.changeset/many-snakes-glow.md new file mode 100644 index 0000000000000..5f5166137fe65 --- /dev/null +++ b/.changeset/many-snakes-glow.md @@ -0,0 +1,6 @@ +--- +"@gradio/app": patch +"gradio": patch +--- + +fix:Fix programmatic tab selection diff --git a/demo/tabs/run.ipynb b/demo/tabs/run.ipynb index 45de81987121a..804d5f0d019c6 100644 --- a/demo/tabs/run.ipynb +++ b/demo/tabs/run.ipynb @@ -1 +1 @@ -{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: tabs"]}, {"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(\"Set 1\"):\n", " with gr.Tabs() as tabs_1:\n", " tabset_1 = []\n", " textset_1 = []\n", " for i in range(10):\n", " with gr.Tab(f\"Tab {i+1}\") as tab:\n", " gr.Markdown(f\"Text {i+1}!\")\n", " textbox = gr.Textbox(label=f\"Input {i+1}\")\n", " tabset_1.append(tab)\n", " textset_1.append(textbox)\n", " with gr.Tab(\"Set 2\"):\n", " tabset_2 = []\n", " textset_2 = []\n", " for i in range(10):\n", " with gr.Tab(f\"Tab {i+11}\") as tab:\n", " gr.Markdown(f\"Text {i+11}!\")\n", " textbox = gr.Textbox(label=f\"Input {i+11}\")\n", " tabset_2.append(tab)\n", " textset_2.append(textbox)\n", "\n", " for text1, text2 in zip(textset_1, textset_2):\n", " text1.submit(lambda x: x, text1, text2)\n", "\n", " selected = gr.Textbox(label=\"Selected Tab\")\n", " with gr.Row():\n", " hide_odd_btn = gr.Button(\"Hide Odd Tabs\")\n", " show_all_btn = gr.Button(\"Show All Tabs\")\n", " make_even_uninteractive_btn = gr.Button(\"Make Even Tabs Uninteractive\")\n", " make_all_interactive_btn = gr.Button(\"Make All Tabs Interactive\")\n", "\n", " hide_odd_btn.click(lambda: [gr.Tab(visible=i % 2 == 1) for i, _ in enumerate(tabset_1 + tabset_2)], outputs=(tabset_1 + tabset_2))\n", " show_all_btn.click(lambda: [gr.Tab(visible=True) for tab in tabset_1 + tabset_2], outputs=(tabset_1 + tabset_2))\n", " make_even_uninteractive_btn.click(lambda: [gr.Tab(interactive=i % 2 == 0) for i, _ in enumerate(tabset_1 + tabset_2)], outputs=(tabset_1 + tabset_2))\n", " make_all_interactive_btn.click(lambda: [gr.Tab(interactive=True) for tab in tabset_1 + tabset_2], outputs=(tabset_1 + tabset_2))\n", "\n", " def get_selected_index(evt: gr.SelectData):\n", " return evt.value\n", " gr.on([tab.select for tab in tabset_1 + tabset_2], get_selected_index, outputs=selected)\n", "\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5} \ No newline at end of file +{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: tabs"]}, {"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(\"Set 1\"):\n", " with gr.Tabs(selected=\"a3\") as tabs_1:\n", " tabset_1 = []\n", " textset_1 = []\n", " for i in range(10):\n", " with gr.Tab(f\"Tab {i+1}\", id=f\"a{i+1}\") as tab:\n", " gr.Markdown(f\"Text {i+1}!\")\n", " textbox = gr.Textbox(label=f\"Input {i+1}\")\n", " tabset_1.append(tab)\n", " textset_1.append(textbox)\n", " with gr.Tab(\"Set 2\"):\n", " tabset_2 = []\n", " textset_2 = []\n", " for i in range(10):\n", " with gr.Tab(f\"Tab {i+11}\") as tab:\n", " gr.Markdown(f\"Text {i+11}!\")\n", " textbox = gr.Textbox(label=f\"Input {i+11}\")\n", " tabset_2.append(tab)\n", " textset_2.append(textbox)\n", "\n", " for text1, text2 in zip(textset_1, textset_2):\n", " text1.submit(lambda x: x, text1, text2)\n", "\n", " selected = gr.Textbox(label=\"Selected Tab\")\n", " with gr.Row():\n", " hide_odd_btn = gr.Button(\"Hide Odd Tabs\")\n", " show_all_btn = gr.Button(\"Show All Tabs\")\n", " make_even_uninteractive_btn = gr.Button(\"Make Even Tabs Uninteractive\")\n", " make_all_interactive_btn = gr.Button(\"Make All Tabs Interactive\")\n", " \n", " select_tab_num = gr.Number(label=\"Select Tab #\", value=1)\n", "\n", "\n", " hide_odd_btn.click(lambda: [gr.Tab(visible=i % 2 == 1) for i, _ in enumerate(tabset_1 + tabset_2)], outputs=(tabset_1 + tabset_2))\n", " show_all_btn.click(lambda: [gr.Tab(visible=True) for tab in tabset_1 + tabset_2], outputs=(tabset_1 + tabset_2))\n", " make_even_uninteractive_btn.click(lambda: [gr.Tab(interactive=i % 2 == 0) for i, _ in enumerate(tabset_1 + tabset_2)], outputs=(tabset_1 + tabset_2))\n", " make_all_interactive_btn.click(lambda: [gr.Tab(interactive=True) for tab in tabset_1 + tabset_2], outputs=(tabset_1 + tabset_2))\n", " select_tab_num.submit(lambda x: gr.Tabs(selected=f\"a{x}\"), inputs=select_tab_num, outputs=tabs_1)\n", "\n", " def get_selected_index(evt: gr.SelectData):\n", " return evt.value\n", " gr.on([tab.select for tab in tabset_1 + tabset_2], get_selected_index, outputs=selected)\n", "\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5} \ No newline at end of file diff --git a/demo/tabs/run.py b/demo/tabs/run.py index 6696399d68278..fa363b85379e0 100644 --- a/demo/tabs/run.py +++ b/demo/tabs/run.py @@ -3,11 +3,11 @@ with gr.Blocks() as demo: with gr.Tabs(): with gr.Tab("Set 1"): - with gr.Tabs() as tabs_1: + with gr.Tabs(selected="a3") as tabs_1: tabset_1 = [] textset_1 = [] for i in range(10): - with gr.Tab(f"Tab {i+1}") as tab: + with gr.Tab(f"Tab {i+1}", id=f"a{i+1}") as tab: gr.Markdown(f"Text {i+1}!") textbox = gr.Textbox(label=f"Input {i+1}") tabset_1.append(tab) @@ -31,11 +31,15 @@ show_all_btn = gr.Button("Show All Tabs") make_even_uninteractive_btn = gr.Button("Make Even Tabs Uninteractive") make_all_interactive_btn = gr.Button("Make All Tabs Interactive") + + select_tab_num = gr.Number(label="Select Tab #", value=1) + hide_odd_btn.click(lambda: [gr.Tab(visible=i % 2 == 1) for i, _ in enumerate(tabset_1 + tabset_2)], outputs=(tabset_1 + tabset_2)) show_all_btn.click(lambda: [gr.Tab(visible=True) for tab in tabset_1 + tabset_2], outputs=(tabset_1 + tabset_2)) make_even_uninteractive_btn.click(lambda: [gr.Tab(interactive=i % 2 == 0) for i, _ in enumerate(tabset_1 + tabset_2)], outputs=(tabset_1 + tabset_2)) make_all_interactive_btn.click(lambda: [gr.Tab(interactive=True) for tab in tabset_1 + tabset_2], outputs=(tabset_1 + tabset_2)) + select_tab_num.submit(lambda x: gr.Tabs(selected=f"a{x}"), inputs=select_tab_num, outputs=tabs_1) def get_selected_index(evt: gr.SelectData): return evt.value diff --git a/js/app/src/Render.svelte b/js/app/src/Render.svelte index 500073459ca4d..377461a060879 100644 --- a/js/app/src/Render.svelte +++ b/js/app/src/Render.svelte @@ -62,7 +62,7 @@ new CustomEvent("prop_change", { detail: { id, prop: p, value: v } }); @@ -32,7 +32,7 @@ function report(props: string) { return function (propargs: any) { - const ev = s(id, props, propargs); + const ev = s(_id, props, propargs); target.dispatchEvent(ev); }; } diff --git a/js/app/test/tabs.spec.ts b/js/app/test/tabs.spec.ts index 2fd9d7c6756bf..d06b5342ba3df 100644 --- a/js/app/test/tabs.spec.ts +++ b/js/app/test/tabs.spec.ts @@ -61,3 +61,15 @@ test("output from one tab to another works", async ({ page }) => { await expect(page.getByLabel("Input 14")).toBeVisible(); await expect(page.getByLabel("Input 14")).toHaveValue("hi"); }); + +test("programmatic selection works", async ({ page }) => { + await expect(page.getByText("Text 1!")).toBeHidden(); + await expect(page.getByText("Text 3!")).toBeVisible(); + + await page.getByLabel("Select Tab #").click(); + await page.getByLabel("Select Tab #").fill("6"); + await page.getByLabel("Select Tab #").press("Enter"); + + await expect(page.getByText("Text 3!")).toBeHidden(); + await expect(page.getByText("Text 6!")).toBeVisible(); +});