Update app.py

app.py

@@ -44,190 +44,53 @@ for k, v in [("seq_val", ""), ("smi_val", ""), ("bseq_val", ""),
 
 is_dark = st.session_state.theme == "dark"
 
-# CSS and Theming
+# CSS and Theming - Minified to prevent Streamlit Markdown parser from breaking the style tags
 if is_dark:
-    theme_css = """
-    :root {
-      --bg: #0f172a;
-      --surface: #1e293b;
-      --border: #334155;
-      --border-light: #475569;
-      --text: #f8fafc;
-      --muted: #94a3b8;
-      --accent: #3b82f6;
-      --accent-dim: rgba(59, 130, 246, 0.15);
-      --success: #10b981;
-      --success-dim: rgba(16, 185, 129, 0.15);
-      --danger: #ef4444;
-      --danger-dim: rgba(239, 68, 68, 0.15);
-      --font-sans: 'Inter', sans-serif;
-      --font-mono: 'JetBrains Mono', monospace;
-    }
-    """
+    theme_css = ":root { --bg: #0f172a; --surface: #1e293b; --border: #334155; --border-light: #475569; --text: #f8fafc; --muted: #94a3b8; --accent: #3b82f6; --accent-dim: rgba(59, 130, 246, 0.15); --success: #10b981; --success-dim: rgba(16, 185, 129, 0.15); --danger: #ef4444; --danger-dim: rgba(239, 68, 68, 0.15); --font-sans: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; }"
 else:
-    theme_css = """
-    :root {
-      --bg: #f8fafc;
-      --surface: #ffffff;
-      --border: #e2e8f0;
-      --border-light: #cbd5e1;
-      --text: #0f172a;
-      --muted: #64748b;
-      --accent: #2563eb;
-      --accent-dim: rgba(37, 99, 235, 0.10);
-      --success: #059669;
-      --success-dim: rgba(5, 150, 105, 0.10);
-      --danger: #dc2626;
-      --danger-dim: rgba(220, 38, 38, 0.10);
-      --font-sans: 'Inter', sans-serif;
-      --font-mono: 'JetBrains Mono', monospace;
-    }
-    """
-
-# Standard string concatenation to avoid f-string curly brace conflicts
-base_css = """
+    theme_css = ":root { --bg: #f8fafc; --surface: #ffffff; --border: #e2e8f0; --border-light: #cbd5e1; --text: #0f172a; --muted: #64748b; --accent: #2563eb; --accent-dim: rgba(37, 99, 235, 0.10); --success: #059669; --success-dim: rgba(5, 150, 105, 0.10); --danger: #dc2626; --danger-dim: rgba(220, 38, 38, 0.10); --font-sans: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; }"
+
+base_css = f"""
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <style>
-/* Hide Streamlit elements */
-#MainMenu, footer, header { visibility: hidden; }
-.stDeployButton, [data-testid="stToolbar"] { display: none; }
-[data-testid="collapsedControl"] { display: none !important; }
-section[data-testid="stSidebar"] { display: none !important; }
-""" + theme_css + """
-.stApp {
-  background: var(--bg) !important;
-  font-family: var(--font-sans) !important;
-  color: var(--text) !important;
-}
-
-/* Center and constrain main block */
-.main .block-container {
-  max-width: 1160px !important;
-  margin: 0 auto !important;
-  padding: 0 32px 80px !important;
-}
-
-/* Tabs */
-.stTabs [data-baseweb="tab-list"] {
-  background: transparent !important;
-  border-bottom: 1px solid var(--border) !important;
-  gap: 0 !important; padding: 0 !important;
-}
-.stTabs [data-baseweb="tab"] {
-  background: transparent !important;
-  color: var(--muted) !important;
-  font-family: var(--font-sans) !important;
-  font-size: 13px !important; font-weight: 500 !important;
-  padding: 10px 18px !important;
-  border: none !important;
-  border-bottom: 2px solid transparent !important;
-  border-radius: 0 !important;
-}
-.stTabs [aria-selected="true"] {
-  color: var(--accent) !important;
-  border-bottom-color: var(--accent) !important;
-  background: transparent !important;
-}
-.stTabs [data-baseweb="tab-highlight"] { background: var(--accent) !important; height: 2px !important; }
-.stTabs [data-baseweb="tab-border"] { display: none !important; }
-.stTabs [data-baseweb="tab-panel"] { padding: 24px 0 0 !important; background: transparent !important; }
-
-/* Textarea & Input */
-.stTextArea textarea, .stTextInput input {
-  background: var(--surface) !important;
-  border: 1px solid var(--border) !important;
-  border-radius: 6px !important;
-  color: var(--text) !important;
-  font-family: var(--font-mono) !important;
-  font-size: 13px !important;
-  line-height: 1.6 !important;
-}
-.stTextArea textarea:focus, .stTextInput input:focus {
-  border-color: var(--accent) !important;
-  box-shadow: 0 0 0 2px var(--accent-dim) !important;
-}
-.stTextArea label, .stTextInput label {
-  color: var(--muted) !important;
-  font-family: var(--font-sans) !important;
-  font-size: 12px !important; font-weight: 500 !important;
-}
-
-/* File uploader */
-[data-testid="stFileUploader"] {
-  background: var(--surface) !important;
-  border: 2px dashed var(--border) !important;
-  border-radius: 8px !important;
-}
-[data-testid="stFileUploader"] label,
-[data-testid="stFileUploader"] span { color: var(--muted) !important; font-family: var(--font-sans) !important; }
-[data-testid="stFileUploaderDropzone"] { background: transparent !important; }
-
-/* Buttons */
-.stButton button[kind="primary"] {
-  background: var(--accent) !important;
-  color: #ffffff !important;
-  border: none !important;
-  border-radius: 6px !important;
-  font-family: var(--font-sans) !important;
-  font-size: 14px !important; font-weight: 600 !important;
-  padding: 10px 24px !important;
-  width: 100% !important;
-  transition: opacity .15s !important;
-}
-.stButton button[kind="primary"]:hover { opacity: 0.90 !important; }
-
-/* Standard Buttons (like Theme Toggle) */
-.stButton button[kind="secondary"] {
-  background: var(--surface) !important;
-  color: var(--text) !important;
-  border: 1px solid var(--border) !important;
-  border-radius: 6px !important;
-  font-family: var(--font-sans) !important;
-  font-size: 13px !important; font-weight: 500 !important;
-}
-.stButton button[kind="secondary"]:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
-
-/* Pill buttons */
-.pill-btn button {
-  background: var(--surface) !important;
-  color: var(--muted) !important;
-  border: 1px solid var(--border) !important;
-  border-radius: 4px !important;
-  font-family: var(--font-mono) !important;
-  font-size: 11.5px !important;
-  padding: 3px 10px !important;
-  width: auto !important;
-}
-.pill-btn button:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
-
-/* Dataframe */
-[data-testid="stDataFrame"] iframe { background: var(--surface) !important; }
-.stDataFrame { border: 1px solid var(--border) !important; border-radius: 8px !important; }
-
-/* Progress bar */
-.stProgress > div > div > div > div { background-color: var(--accent) !important; }
-[data-testid="stProgressBarMessage"] { color: var(--muted) !important; font-family: var(--font-mono) !important; font-size: 11px !important; }
-
-/* Spinner */
-.stSpinner > div { border-top-color: var(--accent) !important; }
-[data-testid="stSpinnerMessage"] { color: var(--muted) !important; font-family: var(--font-mono) !important; font-size: 12px !important; }
-
-/* Alert/error */
-[data-testid="stAlert"] {
-  background: var(--danger-dim) !important;
-  border: 1px solid var(--danger) !important;
-  border-radius: 6px !important;
-  color: var(--danger) !important;
-  font-family: var(--font-mono) !important;
-}
-
-hr { border: none !important; border-top: 1px solid var(--border) !important; margin: 20px 0 !important; }
+#MainMenu, footer, header {{ visibility: hidden; }}
+.stDeployButton, [data-testid="stToolbar"] {{ display: none; }}
+[data-testid="collapsedControl"] {{ display: none !important; }}
+section[data-testid="stSidebar"] {{ display: none !important; }}
+{theme_css}
+.stApp {{ background: var(--bg) !important; font-family: var(--font-sans) !important; color: var(--text) !important; }}
+.main .block-container {{ max-width: 1160px !important; margin: 0 auto !important; padding: 0 32px 80px !important; }}
+.stTabs [data-baseweb="tab-list"] {{ background: transparent !important; border-bottom: 1px solid var(--border) !important; gap: 0 !important; padding: 0 !important; }}
+.stTabs [data-baseweb="tab"] {{ background: transparent !important; color: var(--muted) !important; font-family: var(--font-sans) !important; font-size: 13px !important; font-weight: 500 !important; padding: 10px 18px !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; }}
+.stTabs [aria-selected="true"] {{ color: var(--accent) !important; border-bottom-color: var(--accent) !important; background: transparent !important; }}
+.stTabs [data-baseweb="tab-highlight"] {{ background: var(--accent) !important; height: 2px !important; }}
+.stTabs [data-baseweb="tab-border"] {{ display: none !important; }}
+.stTabs [data-baseweb="tab-panel"] {{ padding: 24px 0 0 !important; background: transparent !important; }}
+.stTextArea textarea, .stTextInput input {{ background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; color: var(--text) !important; font-family: var(--font-mono) !important; font-size: 13px !important; line-height: 1.6 !important; }}
+.stTextArea textarea:focus, .stTextInput input:focus {{ border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-dim) !important; }}
+.stTextArea label, .stTextInput label {{ color: var(--muted) !important; font-family: var(--font-sans) !important; font-size: 12px !important; font-weight: 500 !important; }}
+[data-testid="stFileUploader"] {{ background: var(--surface) !important; border: 2px dashed var(--border) !important; border-radius: 8px !important; }}
+[data-testid="stFileUploader"] label, [data-testid="stFileUploader"] span {{ color: var(--muted) !important; font-family: var(--font-sans) !important; }}
+[data-testid="stFileUploaderDropzone"] {{ background: transparent !important; }}
+.stButton button[kind="primary"] {{ background: var(--accent) !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; font-family: var(--font-sans) !important; font-size: 14px !important; font-weight: 600 !important; padding: 10px 24px !important; width: 100% !important; transition: opacity .15s !important; }}
+.stButton button[kind="primary"]:hover {{ opacity: 0.90 !important; }}
+.stButton button[kind="secondary"] {{ background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; font-family: var(--font-sans) !important; font-size: 13px !important; font-weight: 500 !important; }}
+.stButton button[kind="secondary"]:hover {{ border-color: var(--accent) !important; color: var(--accent) !important; }}
+.pill-btn button {{ background: var(--surface) !important; color: var(--muted) !important; border: 1px solid var(--border) !important; border-radius: 4px !important; font-family: var(--font-mono) !important; font-size: 11.5px !important; padding: 3px 10px !important; width: auto !important; }}
+.pill-btn button:hover {{ border-color: var(--accent) !important; color: var(--accent) !important; }}
+[data-testid="stDataFrame"] iframe {{ background: var(--surface) !important; }}
+.stDataFrame {{ border: 1px solid var(--border) !important; border-radius: 8px !important; }}
+.stProgress > div > div > div > div {{ background-color: var(--accent) !important; }}
+[data-testid="stProgressBarMessage"] {{ color: var(--muted) !important; font-family: var(--font-mono) !important; font-size: 11px !important; }}
+.stSpinner > div {{ border-top-color: var(--accent) !important; }}
+[data-testid="stSpinnerMessage"] {{ color: var(--muted) !important; font-family: var(--font-mono) !important; font-size: 12px !important; }}
+[data-testid="stAlert"] {{ background: var(--danger-dim) !important; border: 1px solid var(--danger) !important; border-radius: 6px !important; color: var(--danger) !important; font-family: var(--font-mono) !important; }}
+hr {{ border: none !important; border-top: 1px solid var(--border) !important; margin: 20px 0 !important; }}
 </style>
 """
 
-# Inject the clean CSS directly into the app
 st.markdown(base_css, unsafe_allow_html=True)
 
 # Constants / paths