Add event and gr.Select data support in gr.render blocks (#10114)

* changes

* add changeset

* changes

* changes

* add changeset

---------

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

.changeset/shiny-dancers-heal.md

@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Add event and gr.Select data support in gr.render blocks

demo/render_tests/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: render_tests"]}, {"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": ["from datetime import datetime\n", "\n", "import gradio as gr\n", "\n", "def update_log():\n", "    return datetime.now().timestamp()\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Textbox(value=update_log, every=0.2, label=\"Time\")\n", "    \n", "    slider = gr.Slider(1, 10, step=1)\n", "    @gr.render(inputs=[slider])\n", "    def show_log(s):\n", "        for i in range(s):\n", "            gr.Textbox(value=update_log, every=0.2, label=f\"Render {i + 1}\")\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: render_tests"]}, {"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": ["from datetime import datetime\n", "\n", "import gradio as gr\n", "\n", "def update_log():\n", "    return datetime.now().timestamp()\n", "\n", "def get_target(evt: gr.EventData):\n", "    return evt.target\n", "\n", "def get_select_index(evt: gr.SelectData):\n", "    return evt.index\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Textbox(value=update_log, every=0.2, label=\"Time\")\n", "    \n", "    slider = gr.Slider(1, 10, step=1)\n", "    @gr.render(inputs=[slider])\n", "    def show_log(s):\n", "        with gr.Row():\n", "            for i in range(s):\n", "                gr.Textbox(value=update_log, every=0.2, label=f\"Render {i + 1}\")\n", "\n", "    with gr.Row():\n", "        selected_btn = gr.Textbox(label=\"Selected Button\")\n", "        selected_chat = gr.Textbox(label=\"Selected Chat\")\n", "    @gr.render(inputs=[slider])\n", "    def show_buttons(s):\n", "        with gr.Row():\n", "            with gr.Column():\n", "                for i in range(s):\n", "                    btn = gr.Button(f\"Button {i + 1}\")\n", "                    btn.click(get_target, None, selected_btn)\n", "            chatbot = gr.Chatbot([[\"Hello\", \"Hi\"], [\"How are you?\", \"I'm good.\"]])\n", "            chatbot.select(get_select_index, None, selected_chat)\n", "\n", "if __name__ == '__main__':\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/render_tests/run.py

@@ -5,14 +5,34 @@ import gradio as gr
 def update_log():
     return datetime.now().timestamp()
 
+def get_target(evt: gr.EventData):
+    return evt.target
+
+def get_select_index(evt: gr.SelectData):
+    return evt.index
+
 with gr.Blocks() as demo:
     gr.Textbox(value=update_log, every=0.2, label="Time")
     
     slider = gr.Slider(1, 10, step=1)
     @gr.render(inputs=[slider])
     def show_log(s):
-        for i in range(s):
+        with gr.Row():
-            gr.Textbox(value=update_log, every=0.2, label=f"Render {i + 1}")
+            for i in range(s):
+                gr.Textbox(value=update_log, every=0.2, label=f"Render {i + 1}")
+
+    with gr.Row():
+        selected_btn = gr.Textbox(label="Selected Button")
+        selected_chat = gr.Textbox(label="Selected Chat")
+    @gr.render(inputs=[slider])
+    def show_buttons(s):
+        with gr.Row():
+            with gr.Column():
+                for i in range(s):
+                    btn = gr.Button(f"Button {i + 1}")
+                    btn.click(get_target, None, selected_btn)
+            chatbot = gr.Chatbot([["Hello", "Hi"], ["How are you?", "I'm good."]])
+            chatbot.select(get_select_index, None, selected_chat)
 
 if __name__ == '__main__':
     demo.launch()

gradio/route_utils.py

@@ -50,7 +50,7 @@ from gradio.exceptions import Error
 from gradio.state_holder import SessionState
 
 if TYPE_CHECKING:
-    from gradio.blocks import BlockFunction, Blocks
+    from gradio.blocks import BlockFunction, Blocks, BlocksConfig
     from gradio.helpers import EventData
     from gradio.routes import App
 
@@ -286,14 +286,14 @@ def restore_session_state(app: App, body: PredictBodyInternal):
 
 
 def prepare_event_data(
-    blocks: Blocks,
+    blocks_config: BlocksConfig,
     body: PredictBodyInternal,
 ) -> EventData:
     from gradio.helpers import EventData
 
     target = body.trigger_id
     event_data = EventData(
-        blocks.blocks.get(target) if target else None,
+        blocks_config.blocks.get(target) if target else None,
         body.event_data,
     )
     return event_data
@@ -308,7 +308,7 @@ async def call_process_api(
 ):
     session_state, iterator = restore_session_state(app=app, body=body)
 
-    event_data = prepare_event_data(app.get_blocks(), body)
+    event_data = prepare_event_data(session_state.blocks_config, body)
     event_id = body.event_id
 
     session_hash = getattr(body, "session_hash", None)

js/spa/test/render_tests.spec.ts

@@ -21,3 +21,16 @@ test("Test every= works in render", async ({ page }) => {
 	let box_2_value_end = parseFloat(await box_2.inputValue());
 	expect(box_2_value_end).toBeGreaterThan(box_2_value_start);
 });
+
+test("Test event/selection data works in render", async ({ page }) => {
+	const selected_button = page.getByLabel("Selected Button");
+	const slider = page.getByLabel("number input for Slider");
+	await slider.fill("3");
+	await page.getByRole("button", { name: "Button 2" }).click();
+
+	await expect(selected_button).toHaveValue("Button 2");
+
+	const selected_chat = page.getByLabel("Selected Chat");
+	await page.getByText("Hi").click();
+	await expect(selected_chat).toHaveValue("[0, 1]");
+});