Update app.py

app.py

@@ -34,68 +34,128 @@ st.set_page_config(
 
 
 
-# Custom CSS
+# Custom CSS - IMPROVED VERSION with larger fonts
 st.markdown("""
 <style>
-    /* Global base font size increase */
-    html {
-        font-size: 16px !important;
+    /* ========================================
+       MAIN CONTENT - LARGER FONTS
+       ======================================== */
+    
+    /* Increase base font size for all main content */
+    .main .element-container,
+    .main [data-testid="stMarkdownContainer"],
+    .main [data-testid="stText"],
+    .main p,
+    .main span,
+    .main div {
+        font-size: 1.15rem !important;
     }
-    body {
-        font-size: 1.05rem !important;
+    
+    /* Headers in main content */
+    .main h1 {
+        font-size: 2.8rem !important;
+        font-weight: 700 !important;
+    }
+    .main h2 {
+        font-size: 2.0rem !important;
+        font-weight: 600 !important;
+    }
+    .main h3 {
+        font-size: 1.6rem !important;
+        font-weight: 600 !important;
     }
     
+    /* Custom header classes */
     .main-header {
-        font-size: 2.5rem;
+        font-size: 2.8rem !important;
         font-weight: bold;
         color: #1f77b4;
         margin-bottom: 1rem;
     }
     .sub-header {
-        font-size: 1.2rem;
+        font-size: 1.4rem !important;
         color: #666;
         margin-bottom: 2rem;
     }
-    .metric-box {
-        background-color: #f0f2f6;
-        padding: 1rem;
-        border-radius: 0.5rem;
-        margin: 0.5rem 0;
+    
+    /* Info/warning/success boxes */
+    .main [data-testid="stAlert"] p,
+    .main [data-testid="stAlert"] {
+        font-size: 1.1rem !important;
     }
     
-    /* GLOBAL font size increase for main content */
-    .main * {
+    /* Dataframes and tables */
+    .main [data-testid="stDataFrame"],
+    .main .dataframe,
+    .main table {
         font-size: 1.05rem !important;
     }
+    .main .dataframe th,
+    .main .dataframe td {
+        font-size: 1.05rem !important;
+        padding: 8px !important;
+    }
     
-    /* Restore proper header sizes */
-    .main h1 {
-        font-size: 2.5rem !important;
+    /* Metrics */
+    .main [data-testid="stMetric"] {
+        font-size: 1.15rem !important;
     }
-    .main h2 {
-        font-size: 1.75rem !important;
+    .main [data-testid="stMetricLabel"] {
+        font-size: 1.1rem !important;
     }
-    .main h3 {
-        font-size: 1.5rem !important;
+    .main [data-testid="stMetricValue"] {
+        font-size: 1.8rem !important;
+    }
+    
+    /* Buttons in main content */
+    .main button p,
+    .main button span {
+        font-size: 1.05rem !important;
+    }
+    
+    /* Selectbox, radio, and other inputs in main */
+    .main .stSelectbox label,
+    .main .stRadio label,
+    .main .stNumberInput label,
+    .main .stMultiSelect label {
+        font-size: 1.1rem !important;
+    }
+    
+    .main .stSelectbox [data-baseweb="select"] div,
+    .main .stRadio [role="radiogroup"] label,
+    .main .stNumberInput input {
+        font-size: 1.05rem !important;
     }
     
-    /* Button text should stay normal */
-    .main button {
-        font-size: 1rem !important;
+    /* Expander headers */
+    .main [data-testid="stExpander"] summary {
+        font-size: 1.15rem !important;
     }
     
-    /* Ultra-compact sidebar - MAXIMUM density */
+    /* Code blocks */
+    .main code,
+    .main pre {
+        font-size: 1.0rem !important;
+    }
+    
+    /* ========================================
+       SIDEBAR - COMPACT & NORMAL FONT
+       ======================================== */
+    
+    /* Ultra-compact sidebar spacing */
     section[data-testid="stSidebar"] {
         padding-top: 0.2rem !important;
     }
     section[data-testid="stSidebar"] > div {
         padding-top: 0.2rem !important;
     }
-    /* Zero margin on markdown */
+    
+    /* Minimal margins */
     section[data-testid="stSidebar"] [data-testid="stMarkdownContainer"] {
         margin: 0rem !important;
     }
-    /* Minimal subheader spacing - THE KEY FIX */
+    
+    /* Minimal header spacing */
     section[data-testid="stSidebar"] h1, 
     section[data-testid="stSidebar"] h2, 
     section[data-testid="stSidebar"] h3 {
@@ -103,7 +163,9 @@ st.markdown("""
         margin-bottom: 0.2rem !important;
         padding: 0rem !important;
         line-height: 1.2 !important;
+        font-size: 1.0rem !important;
     }
+    
     /* Tight widget spacing */
     section[data-testid="stSidebar"] .stSelectbox,
     section[data-testid="stSidebar"] .stNumberInput,
@@ -112,36 +174,46 @@ st.markdown("""
         margin-top: 0.1rem !important;
         margin-bottom: 0.2rem !important;
     }
+    
     section[data-testid="stSidebar"] .stButton {
         margin: 0.2rem 0 !important;
     }
-    /* Minimal element container spacing */
+    
     section[data-testid="stSidebar"] .element-container {
         margin: 0.1rem 0 !important;
     }
-    /* Compact alert boxes */
+    
     section[data-testid="stSidebar"] .stAlert {
         padding: 0.3rem 0.5rem !important;
         margin: 0.1rem 0 !important;
     }
-    /* Remove extra label spacing */
+    
     section[data-testid="stSidebar"] label {
         margin-bottom: 0.1rem !important;
+        font-size: 0.9rem !important;
     }
-    /* Compact captions */
+    
     section[data-testid="stSidebar"] .stCaptionContainer {
         margin: 0.1rem 0 !important;
     }
-    /* Remove hr spacing completely */
+    
     section[data-testid="stSidebar"] hr {
         margin: 0.2rem 0 !important;
     }
-    /* Keep sidebar font size normal */
+    
+    /* Sidebar font sizes - keep normal/small */
     section[data-testid="stSidebar"] * {
-        font-size: 0.875rem !important;
+        font-size: 0.9rem !important;
     }
-    section[data-testid="stSidebar"] h3 {
-        font-size: 1rem !important;
+    
+    section[data-testid="stSidebar"] p,
+    section[data-testid="stSidebar"] span,
+    section[data-testid="stSidebar"] div {
+        font-size: 0.9rem !important;
+    }
+    
+    section[data-testid="stSidebar"] button {
+        font-size: 0.9rem !important;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -563,9 +635,20 @@ def main():
         
         # Full results
         with st.expander("📋 All Comparison Results"):
-            display_df = filtered_df[['Reference', 'Ref_Sequence', 'Query', 'Query_Sequence', 'RMSD']].copy()
+            display_df = filtered_df[['Reference', 'Ref_Window', 'Ref_Sequence', 'Query', 'Query_Window', 'Query_Sequence', 'RMSD']].copy()
+            
+            # Format the window indices to be 1-based (more intuitive for users)
+            display_df['Ref_Residues'] = display_df['Ref_Window'].apply(lambda x: ','.join([str(i+1) for i in x]))
+            display_df['Query_Residues'] = display_df['Query_Window'].apply(lambda x: ','.join([str(i+1) for i in x]))
+            
+            # Reorder columns and drop the window lists
+            display_df = display_df[['Reference', 'Ref_Residues', 'Ref_Sequence', 'Query', 'Query_Residues', 'Query_Sequence', 'RMSD']]
             display_df['RMSD'] = display_df['RMSD'].round(3)
             display_df = display_df.sort_values('RMSD').reset_index(drop=True)
+            
+            # Rename columns for better display
+            display_df.columns = ['Reference', 'Ref_Indices', 'Ref_Sequence', 'Query', 'Query_Indices', 'Query_Sequence', 'RMSD']
+            
             st.dataframe(display_df, use_container_width=True, height=300)
         
         # Visualization