Fix Protein World performance: replace 55k-item dropdown with textbox

The gene dropdown with 55,512 choices caused the browser to hang.
Replaced with:
- A textbox where users type a gene ID and press Enter or click Load
- A small "pick from backpack" dropdown showing only pinned genes
- A hidden dropdown for Gene Card "Show Protein" button integration
All pin callbacks now also sync the backpack picker choices.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app.py

@@ -227,12 +227,14 @@ with demo:
     def on_q2_pin(gene_id, state):
         bp_text, state = on_pin_gene(gene_id, state)
         q4_bp = _backpack_text(state)
-        return bp_text, q4_bp, state
+        picker = gr.Dropdown(choices=state.backpack_genes if state else [])
+        return bp_text, q4_bp, picker, state
 
     C["q2_pin_btn"].click(
         fn=on_q2_pin,
         inputs=[C["q2_selected_gene_text"], C["state"]],
-        outputs=[C["q2_backpack_display"], C["q4_backpack_display"], C["state"]],
+        outputs=[C["q2_backpack_display"], C["q4_backpack_display"],
+                 C["q4_backpack_picker"], C["state"]],
     )
 
     # Table row click → select gene
@@ -260,41 +262,81 @@ with demo:
     )
 
     # -- Quest 4 --
+
+    # Track the currently loaded gene in Quest 4 via state
+    def _load_gene(gene_id):
+        """Load protein stats for a gene ID."""
+        if not gene_id or not gene_id.strip():
+            return get_protein_stats_html("", DATA), ""
+        gid = gene_id.strip()
+        return get_protein_stats_html(gid, DATA), gid
+
+    # Load button: type a gene ID and click Load
+    C["q4_load_btn"].click(
+        fn=_load_gene,
+        inputs=[C["q4_gene_input"]],
+        outputs=[C["q4_protein_stats_html"], C["q4_gene_input"]],
+    )
+
+    # Also trigger on Enter key in the textbox
+    C["q4_gene_input"].submit(
+        fn=_load_gene,
+        inputs=[C["q4_gene_input"]],
+        outputs=[C["q4_protein_stats_html"], C["q4_gene_input"]],
+    )
+
+    # Backpack quick-pick dropdown
+    C["q4_backpack_picker"].change(
+        fn=lambda gene_id: (get_protein_stats_html(gene_id, DATA), gene_id or ""),
+        inputs=[C["q4_backpack_picker"]],
+        outputs=[C["q4_protein_stats_html"], C["q4_gene_input"]],
+    )
+
+    # Hidden dropdown receives value from Gene Card "Show Protein" button
     C["q4_gene_dropdown"].change(
-        fn=lambda gene_id: get_protein_stats_html(gene_id, DATA),
+        fn=lambda gene_id: (get_protein_stats_html(gene_id, DATA), gene_id or ""),
         inputs=[C["q4_gene_dropdown"]],
-        outputs=[C["q4_protein_stats_html"]],
+        outputs=[C["q4_protein_stats_html"], C["q4_gene_input"]],
     )
 
     def on_q4_pin(gene_id, state):
-        """Pin a gene from Quest 4 dropdown, update both backpack displays and charts."""
-        bp_text, state = on_pin_gene(gene_id if gene_id else "", state)
+        """Pin a gene from Quest 4, update both backpack displays and charts."""
+        gid = gene_id.strip() if gene_id else ""
+        bp_text, state = on_pin_gene(gid, state)
         radar = build_backpack_comparison(state, DATA)
         heatmap = build_composition_heatmap(state, DATA)
         q4_bp = _backpack_text(state)
-        return bp_text, q4_bp, radar, heatmap, state
+        # Update the backpack picker choices
+        picker_update = gr.Dropdown(choices=state.backpack_genes if state else [])
+        return bp_text, q4_bp, radar, heatmap, picker_update, state
 
     C["q4_pin_btn"].click(
         fn=on_q4_pin,
-        inputs=[C["q4_gene_dropdown"], C["state"]],
+        inputs=[C["q4_gene_input"], C["state"]],
         outputs=[
             C["q2_backpack_display"],
             C["q4_backpack_display"],
             C["q4_comparison_bar_plot"],
             C["q4_composition_heatmap"],
+            C["q4_backpack_picker"],
             C["state"],
         ],
     )
 
-    C["q4_tab"].select(
-        fn=lambda state: (
+    def _on_q4_tab_select(state):
+        bp_genes = state.backpack_genes if state else []
+        return (
             build_backpack_comparison(state, DATA),
             build_composition_heatmap(state, DATA),
             _backpack_text(state),
-        ),
+            gr.Dropdown(choices=bp_genes),
+        )
+
+    C["q4_tab"].select(
+        fn=_on_q4_tab_select,
         inputs=[C["state"]],
         outputs=[C["q4_comparison_bar_plot"], C["q4_composition_heatmap"],
-                 C["q4_backpack_display"]],
+                 C["q4_backpack_display"], C["q4_backpack_picker"]],
     )
 
     # -- Gene Card --
@@ -319,12 +361,14 @@ with demo:
     def on_gc_pin(state):
         bp_text, state = on_pin_gene(state.selected_gene if state else "", state)
         q4_bp = _backpack_text(state)
-        return bp_text, q4_bp, state
+        picker = gr.Dropdown(choices=state.backpack_genes if state else [])
+        return bp_text, q4_bp, picker, state
 
     C["gc_pin_card_btn"].click(
         fn=on_gc_pin,
         inputs=[C["state"]],
-        outputs=[C["q2_backpack_display"], C["q4_backpack_display"], C["state"]],
+        outputs=[C["q2_backpack_display"], C["q4_backpack_display"],
+                 C["q4_backpack_picker"], C["state"]],
     )
 
     C["gc_download_gene_btn"].click(

ui/quest4.py

@@ -167,7 +167,8 @@ def build_quest4(gene_choices: list[str]):
     """Build Quest 4 tab components. Returns dict of components.
 
     Returned keys (prefixed with ``q4_`` by layout.py):
-        tab, gene_dropdown, protein_stats_html, pin_btn, backpack_display,
+        tab, gene_dropdown, gene_input, load_btn, backpack_picker,
+        protein_stats_html, pin_btn, backpack_display,
         comparison_bar_plot, composition_heatmap
     """
     with gr.Tab("Protein World", id="quest4") as tab:
@@ -186,12 +187,26 @@ def build_quest4(gene_choices: list[str]):
         # -- Single-gene selector --
         with gr.Row():
             with gr.Column(scale=2):
+                # Hidden dropdown to receive values from Gene Card "Show Protein"
                 gene_dropdown = gr.Dropdown(
-                    choices=gene_choices,
-                    label="Select a gene to inspect",
-                    interactive=True,
+                    choices=[],
+                    visible=False,
                     allow_custom_value=True,
                 )
+                with gr.Row():
+                    gene_input = gr.Textbox(
+                        label="Type a gene ID (e.g. g05743)",
+                        placeholder="g05743",
+                        interactive=True,
+                        scale=3,
+                    )
+                    load_btn = gr.Button("Load", variant="primary", size="sm", scale=1)
+                backpack_picker = gr.Dropdown(
+                    choices=[],
+                    label="Or pick from your backpack",
+                    interactive=True,
+                    allow_custom_value=False,
+                )
                 pin_btn = gr.Button(
                     "Pin this gene to Backpack",
                     variant="secondary",
@@ -201,7 +216,7 @@ def build_quest4(gene_choices: list[str]):
                 protein_stats_html = gr.HTML(
                     value=(
                         '<div style="padding:16px;color:#757575;text-align:center;">'
-                        "Select a gene above to see its protein length and amino acid breakdown."
+                        "Type a gene ID and click <b>Load</b>, or pick one from your backpack."
                         "</div>"
                     ),
                     label="Protein Statistics",
@@ -234,6 +249,9 @@ def build_quest4(gene_choices: list[str]):
     return {
         "tab": tab,
         "gene_dropdown": gene_dropdown,
+        "gene_input": gene_input,
+        "load_btn": load_btn,
+        "backpack_picker": backpack_picker,
         "protein_stats_html": protein_stats_html,
         "pin_btn": pin_btn,
         "backpack_display": backpack_display,