Dispatch change event for file explorer (#7441)

* changes

* add changeset

* changes

* changes

* fix test reqs in functional tests

* fix notebooks

* fix notebooks

* fix test flake

---------

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

.changeset/flat-ghosts-happen.md

@@ -0,0 +1,6 @@
+---
+"@gradio/fileexplorer": patch
+"gradio": patch
+---
+
+fix:Dispatch change event for file explorer

demo/file_explorer_component_events/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: file_explorer_component_events"]}, {"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": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('dir1')\n", "!wget -q -O dir1/bar.txt https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir1/bar.txt\n", "!wget -q -O dir1/foo.txt https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir1/foo.txt\n", "os.mkdir('dir2')\n", "!wget -q -O dir2/baz.png https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir2/baz.png\n", "!wget -q -O dir2/foo.png https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir2/foo.png\n", "os.mkdir('dir3')\n", "!wget -q -O dir3/dir3_bar.log https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir3/dir3_bar.log\n", "!wget -q -O dir3/dir3_foo.txt https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir3/dir3_foo.txt\n", "!wget -q -O dir3/dir4 https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir3/dir4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from pathlib import Path\n", "\n", "base_root = Path(__file__).parent.resolve()\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        dd = gr.Dropdown(label=\"Select File Explorer Root\",\n", "                        value=str(base_root / \"dir1\"),\n", "                        choices=[str(base_root / \"dir1\"), str(base_root / \"dir2\"),\n", "                                 str(base_root / \"dir3\")])\n", "        with gr.Group():\n", "            txt_only_glob = gr.Checkbox(label=\"Show only text files\", value=False)\n", "            ignore_txt_in_glob = gr.Checkbox(label=\"Ignore text files in glob\", value=False)\n", "\n", "    fe = gr.FileExplorer(root_dir=str(base_root / \"dir1\"),\n", "                         glob=\"**/*\", interactive=True)\n", "    textbox = gr.Textbox(label=\"Selected Directory\")\n", "    run = gr.Button(\"Run\")\n", "    \n", "    txt_only_glob.select(lambda s: gr.FileExplorer(glob=\"*.txt\" if s else \"*\") ,\n", "                         inputs=[txt_only_glob], outputs=[fe])\n", "    ignore_txt_in_glob.select(lambda s: gr.FileExplorer(ignore_glob=\"*.txt\" if s else None),\n", "                            inputs=[ignore_txt_in_glob], outputs=[fe])            \n", "\n", "    dd.select(lambda s: gr.FileExplorer(root=s), inputs=[dd], outputs=[fe])\n", "    run.click(lambda s: \",\".join(s) if isinstance(s, list) else s, inputs=[fe], outputs=[textbox])\n", "\n", "    with gr.Row():\n", "        a = gr.Textbox(elem_id=\"input-box\")\n", "        a.change(lambda x: x, inputs=[a])\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: file_explorer_component_events"]}, {"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": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('dir1')\n", "!wget -q -O dir1/bar.txt https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir1/bar.txt\n", "!wget -q -O dir1/foo.txt https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir1/foo.txt\n", "os.mkdir('dir2')\n", "!wget -q -O dir2/baz.png https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir2/baz.png\n", "!wget -q -O dir2/foo.png https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir2/foo.png\n", "os.mkdir('dir3')\n", "!wget -q -O dir3/dir3_bar.log https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir3/dir3_bar.log\n", "!wget -q -O dir3/dir3_foo.txt https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir3/dir3_foo.txt\n", "!wget -q -O dir3/dir4 https://github.com/gradio-app/gradio/raw/main/demo/file_explorer_component_events/dir3/dir4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from pathlib import Path\n", "\n", "base_root = Path(__file__).parent.resolve()\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        dd = gr.Dropdown(label=\"Select File Explorer Root\",\n", "                        value=str(base_root / \"dir1\"),\n", "                        choices=[str(base_root / \"dir1\"), str(base_root / \"dir2\"),\n", "                                 str(base_root / \"dir3\")])\n", "        with gr.Group():\n", "            txt_only_glob = gr.Checkbox(label=\"Show only text files\", value=False)\n", "            ignore_txt_in_glob = gr.Checkbox(label=\"Ignore text files in glob\", value=False)\n", "\n", "    fe = gr.FileExplorer(root_dir=str(base_root / \"dir1\"),\n", "                         glob=\"**/*\", interactive=True)\n", "    textbox = gr.Textbox(label=\"Selected Directory\")\n", "    run = gr.Button(\"Run\")\n", "    total_changes = gr.Number(0, elem_id=\"total-changes\")\n", "    \n", "    txt_only_glob.select(lambda s: gr.FileExplorer(glob=\"*.txt\" if s else \"*\") ,\n", "                         inputs=[txt_only_glob], outputs=[fe])\n", "    ignore_txt_in_glob.select(lambda s: gr.FileExplorer(ignore_glob=\"*.txt\" if s else None),\n", "                            inputs=[ignore_txt_in_glob], outputs=[fe])            \n", "\n", "    dd.select(lambda s: gr.FileExplorer(root=s), inputs=[dd], outputs=[fe])\n", "    run.click(lambda s: \",\".join(s) if isinstance(s, list) else s, inputs=[fe], outputs=[textbox])\n", "    fe.change(lambda num: num + 1, inputs=total_changes, outputs=total_changes)\n", "\n", "    with gr.Row():\n", "        a = gr.Textbox(elem_id=\"input-box\")\n", "        a.change(lambda x: x, inputs=[a])\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/file_explorer_component_events/run.py

@@ -17,6 +17,7 @@
                          glob="**/*", interactive=True)
     textbox = gr.Textbox(label="Selected Directory")
     run = gr.Button("Run")
+    total_changes = gr.Number(0, elem_id="total-changes")
 
     txt_only_glob.select(lambda s: gr.FileExplorer(glob="*.txt" if s else "*") ,
                          inputs=[txt_only_glob], outputs=[fe])
@@ -25,6 +26,7 @@
 
     dd.select(lambda s: gr.FileExplorer(root=s), inputs=[dd], outputs=[fe])
     run.click(lambda s: ",".join(s) if isinstance(s, list) else s, inputs=[fe], outputs=[textbox])
+    fe.change(lambda num: num + 1, inputs=total_changes, outputs=total_changes)
 
     with gr.Row():
         a = gr.Textbox(elem_id="input-box")

js/app/test/file_explorer_component_events.spec.ts

@@ -36,6 +36,14 @@ test("File Explorer is interactive and re-runs the server_fn when root is update
 	await expect(
 		page.locator("span").filter({ hasText: "foo.png" }).getByRole("checkbox")
 	).toBeChecked();
+
+	await page
+		.locator("span")
+		.filter({ hasText: "foo.png" })
+		.getByRole("checkbox")
+		.uncheck();
+
+	await expect(page.locator("#total-changes input")).toHaveValue("3");
 });
 
 test("File Explorer correctly displays both directories and files. Directories included in value.", async ({
@@ -92,8 +100,15 @@ test("File Explorer selects all children when top level directory is selected.",
 		.getByRole("checkbox")
 		.check();
 
+	const res = page.waitForEvent("response", {
+		predicate: async (response) => {
+			return (await response.text()).indexOf("process_completed") !== -1;
+		}
+	});
 	await page.getByRole("button", { name: "Run" }).click();
 
+	await res;
+
 	const directory_paths_displayed = async () => {
 		const value = await page.getByLabel("Selected Directory").inputValue();
 		const files_and_dirs = value.split(",");

js/fileexplorer/Index.svelte

@@ -17,6 +17,7 @@
 	export let elem_classes: string[] = [];
 	export let visible = true;
 	export let value: string[][];
+	let old_value: string[][];
 	export let label: string;
 	export let show_label: boolean;
 	export let height: number | undefined = undefined;
@@ -37,6 +38,11 @@
 	export let interactive: boolean;
 
 	$: rerender_key = [root_dir, glob, ignore_glob];
+
+	$: if (JSON.stringify(value) !== JSON.stringify(old_value)) {
+		old_value = value;
+		gradio.dispatch("change");
+	}
 </script>
 
 <Block
@@ -69,7 +75,6 @@
 			{file_count}
 			{interactive}
 			ls_fn={server.ls}
-			on:change={() => gradio.dispatch("change")}
 		/>
 	{/key}
 </Block>