feat: streamline UX

app.py

@@ -40,13 +40,16 @@ def get_columns(split: str):
         choices=ds_split.column_names,
         value=ds_split.column_names[0],
         label="Select a column",
+        visible=True,
     )
 
 
 def get_splits():
     global ds
     splits = list(ds.keys())
-    return gr.Dropdown(choices=splits, value=splits[0], label="Select a split")
+    return gr.Dropdown(
+        choices=splits, value=splits[0], label="Select a split", visible=True
+    )
 
 
 def vectorize_dataset(split: str, column: str):
@@ -60,7 +63,7 @@ def vectorize_dataset(split: str, column: str):
 def run_query(query: str):
     global df
     vector = model.encode(query)
-    return duckdb.sql(
+    df_results = duckdb.sql(
         query=f"""
         SELECT *
         FROM df
@@ -68,6 +71,32 @@ def run_query(query: str):
         LIMIT 5
         """
     ).to_df()
+    return gr.Dataframe(df_results, visible=True)
+
+
+def hide_components():
+    return [
+        gr.Dropdown(visible=False),
+        gr.Dropdown(visible=False),
+        gr.Textbox(visible=False),
+        gr.Button(visible=False),
+        gr.Dataframe(visible=False),
+    ]
+
+
+def partial_hide_components():
+    return [
+        gr.Textbox(visible=False),
+        gr.Button(visible=False),
+        gr.Dataframe(visible=False),
+    ]
+
+
+def show_components():
+    return [
+        gr.Textbox(visible=True, label="Query"),
+        gr.Button(visible=True, value="Search"),
+    ]
 
 
 with gr.Blocks() as demo:
@@ -92,24 +121,36 @@ with gr.Blocks() as demo:
     with gr.Row():
         search_out = gr.HTML(label="Search Results")
 
-    with gr.Row(variant="panel"):
-        split_dropdown = gr.Dropdown(label="Select a split")
-        column_dropdown = gr.Dropdown(label="Select a column")
-    with gr.Row(variant="panel"):
-        query_input = gr.Textbox(label="Query")
+    with gr.Row():
+        split_dropdown = gr.Dropdown(label="Select a split", visible=False)
+        column_dropdown = gr.Dropdown(label="Select a column", visible=False)
+    with gr.Row():
+        query_input = gr.Textbox(label="Query", visible=False)
+
+    btn_run = gr.Button("Search", visible=False)
+    results_output = gr.Dataframe(label="Results", visible=False)
+
     search_in.submit(get_iframe, inputs=search_in, outputs=search_out).then(
         fn=load_dataset_from_hub,
         inputs=search_in,
         show_progress=True,
+    ).then(
+        fn=hide_components,
+        outputs=[split_dropdown, column_dropdown, query_input, btn_run, results_output],
     ).then(fn=get_splits, outputs=split_dropdown).then(
         fn=get_columns, inputs=split_dropdown, outputs=column_dropdown
     )
+
     split_dropdown.change(
         fn=get_columns, inputs=split_dropdown, outputs=column_dropdown
-    ).then(fn=vectorize_dataset, inputs=[split_dropdown, column_dropdown])
+    )
 
-    btn_run = gr.Button("Run")
-    results_output = gr.Dataframe(label="Results")
+    column_dropdown.change(
+        fn=partial_hide_components,
+        outputs=[query_input, btn_run, results_output],
+    ).then(fn=vectorize_dataset, inputs=[split_dropdown, column_dropdown]).then(
+        fn=show_components, outputs=[query_input, btn_run]
+    )
 
     btn_run.click(fn=run_query, inputs=query_input, outputs=results_output)
 demo.launch()