Add auto-render SVG on selection and common reaction presets

app.py

@@ -581,24 +581,64 @@ def build_interface() -> gr.Blocks:
             outputs=[detail_markdown, dataset_table, reaction_plot, reaction_svg],
         )
 
+        # Auto-render SVG when selection changes
+        selection.change(
+            fn=fetch_detail,
+            inputs=[selection, manual_url],
+            outputs=[detail_markdown, dataset_table, reaction_plot, reaction_svg],
+        )
+
         with gr.Tab("Reaction SVG"):
             gr.Markdown(
                 "Render an RDKit reaction sketch from reaction SMILES/SMARTS. "
                 "Example: `CCO.O=C=O>>CC(=O)O` or `[CH3:1].[Cl:2][C@@H](F)[Br]>>[CH3:1][C@@H](F)[Cl]`."
             )
+            
+            # Common reaction examples
+            common_reactions = [
+                ("Ethanol esterification", "CCO.CC(=O)O>>CC(=O)OCC.O"),
+                ("Methane combustion", "C.O>>CO2"),
+                ("Ethylene hydration", "C=C.O>>CCO"),
+                ("Acetylene + HBr", "C#C.Br>>C=CBr"),
+                ("Benzene nitration", "c1ccccc1.O=N(=O)O>>c1ccc(cc1)[N+](=O)[O-].O"),
+                ("Methyl radical + Ethane", "[CH3].CC>>[CH4].C"),
+                ("Chlorine + Hydrogen", "Cl.C>>CCl"),
+                ("Propane oxidation", "CCC.O>>CC(C)=O"),
+            ]
+            
+            with gr.Row():
+                reaction_preset = gr.Dropdown(
+                    label="Common Reactions",
+                    choices=[label for label, _ in common_reactions],
+                    interactive=True
+                )
+                preset_dict = {label: smiles for label, smiles in common_reactions}
+            
             reaction_input = gr.Textbox(
                 label="Reaction SMILES/SMARTS",
                 placeholder="Reactant1.Reactant2>>Product1.Product2",
                 lines=2,
             )
+            
+            def populate_from_preset(preset_name):
+                if preset_name and preset_name in preset_dict:
+                    return preset_dict[preset_name]
+                return ""
+            
+            reaction_preset.change(
+                fn=populate_from_preset,
+                inputs=reaction_preset,
+                outputs=reaction_input,
+            )
+            
             render_button = gr.Button("Render Reaction", variant="secondary")
-            reaction_svg = gr.HTML()
+            reaction_svg_output = gr.HTML()
             render_status = gr.Markdown()
 
             render_button.click(
                 fn=render_reaction_svg,
                 inputs=reaction_input,
-                outputs=[reaction_svg, render_status],
+                outputs=[reaction_svg_output, render_status],
             )
 
     return demo