Add logic to handle non-interactive or hidden tabs (#7107)

* Refactor change_tab function to handle non-interactive or hidden tabs

* add changeset

* Refactor flashcards app UI and modify test

* Fix formatting

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/famous-socks-clap.md

@@ -0,0 +1,6 @@
+---
+"@gradio/tabs": patch
+"gradio": patch
+---
+
+fix:Add logic to handle non-interactive or hidden tabs

demo/blocks_flashcards/run.py

@@ -4,14 +4,25 @@ import gradio as gr
 
 demo = gr.Blocks()
 
+def is_data_empty(flashcards):
+    if isinstance(flashcards, dict):
+        return all(item == '' for sublist in flashcards['data'] for item in sublist)
+    elif isinstance(flashcards, list):
+        return all(all(item == '' for item in sublist) for sublist in flashcards)
+    else:
+        return True
+
 with demo:
     gr.Markdown(
         "Load the flashcards in the table below, then use the Practice tab to practice."
     )
 
+    with gr.Tabs() as tabs:
         with gr.Tab("Word Bank"):
             flashcards_table = gr.Dataframe(headers=["front", "back"], type="array")
-    with gr.Tab("Practice"):
+            flashcards_table.change(fn=lambda: print(flashcards_table.value))
+            practice_btn = gr.Button("Start Practice")
+        with gr.Tab("Practice", interactive=False, id=1) as practice_tab:
             with gr.Row():
                 with gr.Column():
                     front = gr.Textbox(label="Prompt")
@@ -25,12 +36,24 @@ with demo:
                     correct_btn = gr.Button("Correct")
                     incorrect_btn = gr.Button("Incorrect")
 
+            def start_practice(flashcards):
+                # if no cards entered into dataframe yet, return
+                if is_data_empty(flashcards):
+                    practice_tab = gr.Tab("Practice", interactive=False, id=1)
+                    raise gr.Error("Please enter word prompts into the table.")
+                    return [practice_tab, tabs]
+                else:
+                    practice_tab = gr.Tab("Practice", interactive=True, id=1)
+                    new_tabs = gr.Tabs(selected=1)
+                    return [practice_tab, new_tabs]
+
         with gr.Tab("Results", visible=False) as results_tab:
             results = gr.State(value={})
             correct_field = gr.Markdown("# Correct: 0")
             incorrect_field = gr.Markdown("# Incorrect: 0")
             gr.Markdown("Card Statistics: ")
             results_table = gr.Dataframe(headers=["Card", "Correct", "Incorrect"])
+        practice_btn.click(start_practice, inputs=[flashcards_table], outputs=[practice_tab, tabs])
 
         def load_new_card(flashcards):
             card = random.choice(flashcards)

js/app/test/blocks_flashcards.spec.ts

@@ -1,6 +1,12 @@
-import { test } from "@gradio/tootils";
+import { test, expect } from "@gradio/tootils";
 
 test("shows the results tab when results > 0", async ({ page }) => {
+	await page.getByRole("button", { name: "Start Practice" }).click();
+	await expect(
+		page.getByText("Please enter word prompts into the table.")
+	).toBeAttached();
+	await page.getByLabel("Close").click();
+
 	await page
 		.getByRole("button", { name: "front back" })
 		.getByRole("button")
@@ -35,10 +41,14 @@ test("shows the results tab when results > 0", async ({ page }) => {
 
 	await page.getByText("New row").click();
 
-	await page.getByRole("tab", { name: "Practice" }).click();
-	await page.getByRole("button", { name: "New Card" }).click();
 	await page.waitForTimeout(1000);
-	await page.getByRole("button", { name: "Flip Card" }).click();
+	await page.getByText("Start Practice").dblclick();
-	await page.getByRole("button", { name: "Correct", exact: true }).click();
+
-	await page.getByRole("tab", { name: "Results" }).click();
+	await page.waitForTimeout(5000);
+
+	// await page.getByRole("button", { name: "New Card" }).click();
+	// await page.waitForTimeout(1000);
+	// await page.getByRole("button", { name: "Flip Card" }).click();
+	// await page.getByRole("button", { name: "Correct", exact: true }).click();
+	// await page.getByRole("tab", { name: "Results" }).click();
 });

js/tabs/shared/Tabs.svelte

@@ -68,13 +68,22 @@
 	});
 
 	function change_tab(id: object | string | number): void {
+		const tab_to_activate = tabs.find((t) => t.id === id);
+		if (
+			tab_to_activate &&
+			tab_to_activate.interactive &&
+			tab_to_activate.visible
+		) {
 			selected = id;
 			$selected_tab = id;
 			$selected_tab_index = tabs.findIndex((t) => t.id === id);
 			dispatch("change");
+		} else {
+			console.warn("Attempted to select a non-interactive or hidden tab.");
+		}
 	}
 
-	$: selected !== null && change_tab(selected);
+	$: tabs, selected !== null && change_tab(selected);
 </script>
 
 <div class="tabs {elem_classes.join(' ')}" class:hide={!visible} id={elem_id}>