Layout

app.py

@@ -5,23 +5,6 @@ import logging
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
-# Set Page Config
-st.set_page_config(
-    page_title="spMetaTME Atlas",
-    page_icon=":material/hub:",
-    layout="centered",
-    initial_sidebar_state="expanded",
-)
-
-# Import UI Components and Pages
-from src.ui.components.header import render_header, load_css
-from src.ui.components.footer import render_footer
-
-from src.ui.pages.overview import show_overview
-from src.ui.pages.visualization import show_visualization
-from src.ui.pages.preprocessing import show_preprocessing
-from src.ui.pages.flux_analysis import show_flux_analysis
-
 def init_session_state():
     """Initialise global session state."""
     if "adata" not in st.session_state:
@@ -76,19 +59,53 @@ def render_sidebar_dev():
                         st.success("Loaded Breast Cancer Block A (HF local cache)")
                         st.rerun()
 
+# Import UI Components and Pages (after session state init)
+from src.ui.components.header import render_header, load_css
+from src.ui.components.footer import render_footer
+
+from src.ui.pages.overview import show_overview
+from src.ui.pages.visualization import show_visualization
+from src.ui.pages.preprocessing import show_preprocessing
+from src.ui.pages.flux_analysis import show_flux_analysis
+
 def main():
     load_css()
     init_session_state()
-    # render_sidebar_dev()
     
-    # Simple routing
+    # Determine which page will be shown
     if st.session_state.metabolic_adata is not None:
-        show_visualization()
+        current_page = "visualization"
     elif st.session_state.adata is not None:
         if st.session_state.preprocessing_done:
-            show_flux_analysis()
+            current_page = "flux_analysis"
         else:
-            show_preprocessing()
+            current_page = "preprocessing"
+    else:
+        current_page = "overview"
+    
+    # Set page layout based on current page
+    if current_page == "overview":
+        layout = "centered"  # Full width for home page
+    else:
+        layout = "wide"  # Wide layout for other pages (85% width via CSS)
+    
+    # Configure page with appropriate layout
+    st.set_page_config(
+        page_title="spMetaTME Atlas",
+        page_icon=":material/hub:",
+        layout=layout,
+        initial_sidebar_state="expanded",
+    )
+    
+    # render_sidebar_dev()
+    
+    # Render the appropriate page
+    if current_page == "visualization":
+        show_visualization()
+    elif current_page == "preprocessing":
+        show_preprocessing()
+    elif current_page == "flux_analysis":
+        show_flux_analysis()
     else:
         render_header()
         show_overview()

assets/style.css

@@ -0,0 +1,150 @@
+/* Main container styling */
+* {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+:root {
+    --primary-red: #d32f2f;
+    /* Strong Material Red */
+    --light-red: #ffebee;
+    --hover-red: #ffcdd2;
+    --dark-red: #b71c1c;
+    --text-color: #333333;
+    --border-color: #e0e0e0;
+}
+
+.main {
+    background-color: #fffafb;
+    /* Very light red tint */
+    padding: 1rem;
+}
+
+/* Main Header */
+.main-header {
+    font-size: 2.5rem;
+    color: var(--primary-red);
+    margin-bottom: 1.5rem;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+/* Section Headers */
+.section-header {
+    font-size: 1.8rem;
+    color: var(--primary-red);
+    margin-top: 1rem;
+    margin-bottom: 1.5rem;
+    font-weight: 600;
+    border-bottom: 3px solid var(--primary-red);
+    padding-bottom: 0.5rem;
+}
+
+/* Info Boxes with Material Design Shadow */
+.info-box {
+    background: linear-gradient(135deg, var(--light-red) 0%, #fffde7 100%);
+    padding: 1.5rem;
+    border-radius: 8px;
+    margin: 1rem 0;
+    border-left: 4px solid var(--primary-red);
+    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.1);
+    transition: all 0.3s ease;
+}
+
+.info-box:hover {
+    box-shadow: 0 4px 16px rgba(211, 47, 47, 0.2);
+    transform: translateY(-2px);
+}
+
+/* Success Boxes */
+.success-box {
+    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
+    padding: 1.5rem;
+    border-radius: 8px;
+    margin: 1rem 0;
+    border-left: 4px solid #2e7d32;
+    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.1);
+}
+
+/* Card Styling for Material Design */
+.material-card {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin: 1rem 0;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+    border: 1px solid var(--border-color);
+}
+
+.material-card:hover {
+    box-shadow: 0 8px 24px rgba(211, 47, 47, 0.1);
+    transform: translateY(-4px);
+}
+
+/* Button Styling */
+.stButton>button {
+    border-radius: 8px;
+    padding: 0.6rem 1.8rem;
+    font-weight: 600;
+    background: white;
+    color: var(--primary-red);
+    border: 1px solid var(--primary-red);
+    transition: all 0.2s ease;
+}
+
+.stButton>button:hover {
+    background-color: var(--light-red);
+    border-color: var(--primary-red);
+    color: var(--primary-red);
+    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.2);
+}
+
+/* Tab Styling */
+.stTabs [data-baseweb="tab-list"] {
+    gap: 15px;
+    border-bottom: 2px solid var(--border-color);
+}
+
+.stTabs [data-baseweb="tab"] {
+    border-radius: 8px 8px 0 0;
+    padding: 12px 24px;
+    font-weight: 600;
+    background-color: transparent;
+    border: none;
+    color: #666;
+}
+
+.stTabs [data-baseweb="tab"][aria-selected="true"] {
+    color: var(--primary-red);
+    border-bottom: 3px solid var(--primary-red);
+}
+
+/* Sidebar Styling */
+section[data-testid="stSidebar"] {
+    background-color: #ffffff;
+    border-right: 1px solid var(--border-color);
+}
+
+/* Visualization Container */
+.viz-container {
+    background: white;
+    border-radius: 16px;
+    padding: 2.5rem;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+    margin: 1.5rem 0;
+    border: 1px solid #f0f4f8;
+}
+/* Fix flickering on HuggingFace Spaces with stable selector */
+/* @media (min-width: calc(736px + 8rem)) {
+    section[data-testid="stMain"] {
+        padding-left: 5rem !important;
+        padding-right: 5rem !important;
+    }
+} */
+
+/* Constrain wide layout to 85% for visualization pages */
+div[data-testid="stMainBlockContainer"] {
+    max-width: 95% !important;
+    margin: 0 auto !important;
+}