Upload app.py

app.py

@@ -906,6 +906,45 @@ app_ui = ui.page_fluid(
             .btn-info {
                 margin-top: 15px;
             }
+            .structure-details-section {
+                margin-top: 20px;
+                background-color: #f8f9fa;
+                border: 1px solid #dee2e6;
+                border-radius: 8px;
+                padding: 20px;
+            }
+            
+            .pdb-selector {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                gap: 5px;
+                margin-bottom: 20px;
+                margin-left: 20px;
+            }
+            
+            .pdb-select-label {
+                font-weight: bold;
+                margin: 0;
+                white-space: nowrap;
+                display: inline-block;
+                vertical-align: middle;
+            }
+            
+            .pdb-selector select {
+                margin-left: 0;
+                vertical-align: middle;
+                display: inline-block;
+            }
+            
+            .viewer-section, .sequence-section {
+                background-color: white;
+                border: 1px solid #dee2e6;
+                border-radius: 8px;
+                padding: 20px;
+                margin-top: 20px;
+                height: 100%;
+            }
         """)
     ),
     ui.div(
@@ -973,38 +1012,39 @@ app_ui = ui.page_fluid(
                     )
                 )
             ),
-            ui.row(
-                # 3D Viewer Column
-                ui.column(6,
-                    ui.div(
-                        {"class": "viewer-section"},
-                        ui.h4("3D Structure Viewer"),
+            ui.div(
+                {"class": "structure-details-section"},
+                ui.div(
+                    {"class": "pdb-selector"},
+                    ui.tags.label(
+                        "Select PDB ID",
+                        {"class": "pdb-select-label"}
+                    ),
+                    ui.input_select(
+                        "selected_pdb",
+                        "",  # Label is empty as we're using a separate label
+                        choices=[],
+                        width="200px"
+                    )
+                ),
+                ui.row(
+                    ui.column(6,
                         ui.div(
-                            {"class": "viewer-content"},
-                            ui.input_select(
-                                "selected_pdb",
-                                "Select PDB ID",
-                                choices=[]
-                            ),
+                            {"class": "viewer-section"},
+                            ui.h4("3D Structure Viewer"),
                             ui.div(
-                                {"class": "viewer-iframe"},
-                                ui.output_ui("output_iframe")
+                                {"class": "viewer-content"},
+                                ui.div(
+                                    {"class": "viewer-iframe"},
+                                    ui.output_ui("output_iframe")
+                                )
                             )
                         )
-                    )
-                ),
-                # Sequence Results Column
-                ui.column(6,
-                    ui.div(
-                        {"class": "sequence-section"},
-                        ui.h4("Sequences"),
+                    ),
+                    ui.column(6,
                         ui.div(
-                            {"class": "viewer-content"},
-                            ui.input_select(
-                                "selected_seq_pdb",
-                                "Select PDB ID",
-                                choices=[]
-                            ),
+                            {"class": "sequence-section"},
+                            ui.h4("Sequences"),
                             ui.div(
                                 {"class": "sequence-content"},
                                 ui.output_text("sequence_output")
@@ -1041,6 +1081,11 @@ def server(input, output, session):
                 for line in input.query().split():
                     if re.match(r'^[0-9A-Za-z]{4}$', line):
                         pdb_ids.append(line.upper())
+            # Clear the results table for sequence queries
+            @output
+            @render_widget
+            def results_table():
+                return create_interactive_table(pd.DataFrame())
         else:
             df = pd.DataFrame(query_results["results"])
             if df.empty:
@@ -1055,17 +1100,11 @@ def server(input, output, session):
         
         if pdb_ids:
             pdb_ids_store.set(pdb_ids)
-            # Update both dropdowns with the same PDB IDs
             ui.update_select(
                 "selected_pdb",
                 choices=pdb_ids,
                 selected=pdb_ids[0]
             )
-            ui.update_select(
-                "selected_seq_pdb",
-                choices=pdb_ids,
-                selected=pdb_ids[0]
-            )
         else:
             pdb_ids_store.set([])
             ui.update_select(
@@ -1073,11 +1112,6 @@ def server(input, output, session):
                 choices=[],
                 selected=None
             )
-            ui.update_select(
-                "selected_seq_pdb",
-                choices=[],
-                selected=None
-            )
             
     @output
     @render.text
@@ -1087,7 +1121,7 @@ def server(input, output, session):
     @output
     @render.text
     def sequence_output():
-        selected_pdb = input.selected_seq_pdb()
+        selected_pdb = input.selected_pdb()
         if not selected_pdb:
             return "No PDB ID selected"