hide params on reclick

app.py

@@ -78,52 +78,9 @@ DEFAULT_CODE = dedent(
 
 make_gallery_image_buttons_js = """
 function load() {
-    class ClassWatcher {
-
-        constructor(targetNode, classToWatch, classAddedCallback, arg) {
-            this.targetNode = targetNode
-            this.classToWatch = classToWatch
-            this.classAddedCallback = classAddedCallback
-            this.arg = arg
-            this.observer = null
-            this.lastClassState = targetNode.classList.contains(this.classToWatch)
-
-            this.init()
-        }
-
-        init() {
-            this.observer = new MutationObserver(this.mutationCallback)
-            this.observe()
-        }
-
-        observe() {
-            this.observer.observe(this.targetNode, { attributes: true })
-        }
-
-        disconnect() {
-            this.observer.disconnect()
-        }
-
-        mutationCallback = mutationsList => {
-            for (let mutation of mutationsList) {
-                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-                    let currentClassState = mutation.target.classList.contains(this.classToWatch)
-                    if(this.lastClassState !== currentClassState) {
-                        this.lastClassState = currentClassState
-                        if(currentClassState) {
-                            this.classAddedCallback(this.arg)
-                        }
-                    }
-                }
-            }
-        }
-    }
     let buttons = document.getElementsByClassName("block-button");
-    function clickButton(i) {
-        buttons[i].click();
-    }
     Array.from(document.getElementById("pipeline-gallery").getElementsByClassName("thumbnail-item")).map(
-        (b, i) => new ClassWatcher(b, 'selected', clickButton, i)
+        (b, i) => b.addEventListener("click", () => buttons[i].click())
     )
 }
 """
@@ -147,7 +104,7 @@ tr td {
     min-height: 600px;
     max-height: 600px;
 }
-.excluded_tabs .tab-wrapper .tab-container {
+.scollabe_tabs .tab-wrapper .tab-container {
     overflow: scroll;
 }
 """
@@ -164,10 +121,10 @@ def non_empty_list_or_none(input_list: list[str]) -> Optional[list[str]]:
 
 
 with gr.Blocks(css=css, js=make_gallery_image_buttons_js) as demo:
-    state = gr.State({"selected_block": 0})
+    state = gr.State({"selected_block": None})
     gr.Markdown("# Common Crawl Pipeline Creator")
     with gr.Row():
-        with gr.Column():
+        with gr.Column(min_width=640):
             gallery = gr.Gallery(
                 blocks,
                 columns=4,
@@ -344,28 +301,31 @@ with gr.Blocks(css=css, js=make_gallery_image_buttons_js) as demo:
         ]
 
         with gr.Column():
-            with gr.Tab("Output") as output_tab:
-                output_dataframe = gr.DataFrame(datatype="markdown")
-            with gr.Tab("Excluded") as excluded_tab:
-                with gr.Tabs(elem_classes="excluded_tabs"):
-                    excluded_dataframes: dict[Type, gr.DataFrame] = {}
-                    excluded_tabs: dict[Type, gr.Tab] = {}
-                    for step in steps:
-                        if issubclass(step, BaseFilter) and step is not URLFilter:
-                            with gr.Tab(step.__name__) as t:
-                                excluded_dataframes[step] = gr.DataFrame(datatype="markdown")
-                                excluded_tabs[step] = t
-            with gr.Tab("Python code") as code_tab:
-                python_code_markdown = gr.Markdown(DEFAULT_CODE)
+            with gr.Tabs(elem_classes="scollabe_tabs"):
+                with gr.Tab("Output (and % of data)") as output_tab:
+                    output_dataframe = gr.DataFrame(datatype="markdown")
+                with gr.Tab("Excluded (and % of data)") as excluded_tab:
+                    with gr.Tabs(elem_classes="scollabe_tabs"):
+                        excluded_dataframes: dict[Type, gr.DataFrame] = {}
+                        excluded_tabs: dict[Type, gr.Tab] = {}
+                        for step in steps:
+                            if issubclass(step, BaseFilter) and step is not URLFilter:
+                                with gr.Tab(step.__name__ + " (and % of data)") as t:
+                                    excluded_dataframes[step] = gr.DataFrame(datatype="markdown")
+                                    excluded_tabs[step] = t
+                with gr.Tab("Python code") as code_tab:
+                    python_code_markdown = gr.Markdown(DEFAULT_CODE)
 
 
     gr.Markdown("_powered by [datatrove](https://github.com/huggingface/datatrove)_")
 
-    def show_block_ui(i):
+    def show_block_ui(i, current_state: dict):
+        if i == current_state.get("selected_block"):
+            i = None
         return {**{block_ui: gr.Column(visible=(j == i)) for j, block_ui in enumerate(blocks_uis)}, state: {"selected_block": i}}
 
     for i, button in enumerate(gallery_image_buttons):
-        button.click(partial(show_block_ui, i), outputs=blocks_uis + [state])
+        button.click(partial(show_block_ui, i), inputs=[state], outputs=blocks_uis + [state])
 
 
     inputs = [
@@ -505,8 +465,8 @@ with gr.Blocks(css=css, js=make_gallery_image_buttons_js) as demo:
             
             if num_warc_samples:
                 yield {
-                    output_tab: gr.Tab(f"Output (~{len(output_docs)/num_warc_samples*100:.03f}% of data)"),
-                    excluded_tab: gr.Tab(f"Excluded (~{100 - len(output_docs)/num_warc_samples*100:.03f}% of data)"),
+                    output_tab: gr.Tab(f"Output ({len(output_docs)/num_warc_samples*100:.03f}%)"),
+                    excluded_tab: gr.Tab(f"Excluded ({100 - len(output_docs)/num_warc_samples*100:.03f}%)"),
                     output_dataframe: pd.DataFrame({"text": [doc.text for doc in output_docs]}),
                     **{
                         excluded_dataframes[type(step_to_run)]: pd.DataFrame({"text": [doc.text for doc in step_to_run.exclusion_writer.docs]})
@@ -514,7 +474,7 @@ with gr.Blocks(css=css, js=make_gallery_image_buttons_js) as demo:
                         if isinstance(step_to_run, BaseFilter) and type(step_to_run) in excluded_dataframes
                     },
                     **{
-                        excluded_tabs[type(step_to_run)]: gr.Tab(f"{type(step_to_run).__name__} (~{len(step_to_run.exclusion_writer.docs)/num_warc_samples*100:.03f}% of data)")
+                        excluded_tabs[type(step_to_run)]: gr.Tab(f"{type(step_to_run).__name__} ({len(step_to_run.exclusion_writer.docs)/num_warc_samples*100:.03f}%)")
                         for step_to_run in pipeline_executor.pipeline
                         if isinstance(step_to_run, BaseFilter) and type(step_to_run) in excluded_dataframes
                     },
@@ -535,8 +495,8 @@ with gr.Blocks(css=css, js=make_gallery_image_buttons_js) as demo:
                     },
                 }
         yield {
-            output_tab: gr.Tab(f"Output (~{len(output_docs)/num_warc_samples*100:.03f}% of data)"),
-            excluded_tab: gr.Tab(f"Excluded (~{100 - len(output_docs)/num_warc_samples*100:.03f}% of data)"),
+            output_tab: gr.Tab(f"Output ({len(output_docs)/num_warc_samples*100:.03f}%)"),
+            excluded_tab: gr.Tab(f"Excluded ({100 - len(output_docs)/num_warc_samples*100:.03f}%)"),
             output_dataframe: pd.DataFrame({"text": [doc.text for doc in output_docs]}),
             **{
                 excluded_dataframes[type(step_to_run)]: pd.DataFrame({"text": [doc.text for doc in step_to_run.exclusion_writer.docs]})
@@ -544,7 +504,7 @@ with gr.Blocks(css=css, js=make_gallery_image_buttons_js) as demo:
                 if isinstance(step_to_run, BaseFilter) and type(step_to_run) in excluded_dataframes
             },
             **{
-                excluded_tabs[type(step_to_run)]: gr.Tab(f"{type(step_to_run).__name__} (~{len(step_to_run.exclusion_writer.docs)/num_warc_samples*100:.03f}% of data)")
+                excluded_tabs[type(step_to_run)]: gr.Tab(f"{type(step_to_run).__name__} ({len(step_to_run.exclusion_writer.docs)/num_warc_samples*100:.03f}%)")
                 for step_to_run in pipeline_executor.pipeline
                 if isinstance(step_to_run, BaseFilter) and type(step_to_run) in excluded_dataframes
             },